Geek Answers Handbook

Curved Pointed Header

I need to create a blue / green area as shown in the image below. It has angular sides descending to a point having a small curve.

What is the best way to achieve this with CSS? I need to support IE9 + or IE10 + if IE9 support is not possible.

I started here a basic demo - (no content needed in the blue-green area)

spiky heading

+6
source share
3 answers

Here is my attempt with CSS only:

.header { background: #415d67; height: 150px; position: relative; z-index: 1; } .header:after { position: absolute; content: ""; background: #415d67; width: 50%; bottom: -20px; right: 0; height: 100%; transform: skewY(-5deg); transform-origin: right; border-bottom-left-radius: 50px; padding-right: 44px; z-index: -1; } .header:before { position: absolute; content: ""; background: #415d67; width: 50%; bottom: -20px; left: 0; height: 100%; transform: skewY(5deg); transform-origin: left; border-bottom-right-radius: 50px; padding-left: 44px; z-index: -1; } .content { background: white; padding: 20px; padding-top: 100px; }

Jsbin demo

You can also use svg graphics.

+4
source

Another approach would be to use inline svg . The following example uses an element using the bezier curve command for the bottom curve:

 #header { position: relative; padding: 30px; text-align: center; color: #fff; } #header svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } 
 <div id="header"> <svg viewbox="0 0 100 20" preserveAspectRatio="none"> <path fill="#415D67" d="M0 0 H100 V10 L52.5 19.5 Q50 20 47.5 19.5 L0 10z" /> </svg> <p>Some content</p> </div> <p>some more content</p>
+3
source

You can also use a linear gradient: http://codepen.io/gc-nomade/pen/reYWxd

 .header { background: linear-gradient(to bottom left, #415D67 50%, transparent 51%) bottom left no-repeat, linear-gradient(to bottom right, #415D67 50%, transparent 51%) bottom right no-repeat, linear-gradient(to left, #415D67, #415D67) top no-repeat; background-size: 50.1% 30%, 50.1% 30%, 100% 70%; height: 105px; padding-bottom: 45px; /* other makeup from here */ display: flex; } h1 { margin: auto; color: turquoise; text-shadow:0 0 white; } .content { background: white; padding: 0.25em 20px 20px; } 
 <div class="header"> <h1>whatever stands here</h1> </div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quia dicta fuga porro esse enim rem laudantium velit dolore doloremque. Esse, voluptatem, consequatur. Rem error unde esse. Architecto, ad, blanditiis. </div>
+1
source

More articles:


All Articles