CSS corner headers

Question

Does anyone have any ideas for achieving this angular header effect using just CSS?

The shadow from the frame should not be a problem when using a generator like this , but I'm not sure about the angular edges - maybe CSS3 conversion?

Answer 1

Write this:

h1{ font-size:24px; display:inline-block; position:relative; margin:20px; } h1:after{ content:''; position:absolute; top:0; bottom:0; left:-10px; right:-10px; background:red; z-index:-1; -moz-transform: skew(-25deg); -webkit-transform: skew(-25deg); box-shadow:3px 3px 0 0 #000; -moz-box-shadow:3px 3px 0 0 #000; -webkit-box-shadow:3px 3px 0 0 #000; } 

Check out http://jsfiddle.net/RP356/

Answer 2

You can achieve this with transform: skew ():

 transform:skew(-30deg,0); -ms-transform:skew(-30deg,0); /* IE 9 */ -moz-transform:skew(3-0deg,0); /* Firefox */ -webkit-transform:skew(-30deg,0); /* Safari and Chrome */ -o-transform:skew(-30deg,0); /* Opera */ 

As you can see here .

PS However, keep in mind that the text "Title" and the skewed part should be separate elements so as not to affect the text.

(If the text is child, you can set it directly using the opposite transformation: transform:skew(30deg,0) .)

Answer 3

Yes, it is transforming. The following css does this for -20 degrees. and white shadow

 .box { -moz-transform: scale() rotate(0deg) translate(0px, px) skew(-20deg, deg); -webkit-transform: scale() rotate(0deg) translate(0px, px) skew(-20deg, deg); -o-transform: scale() rotate(0deg) translate(0px, px) skew(-20deg, deg); -ms-transform: scale() rotate(0deg) translate(0px, px) skew(-20deg, deg); transform: scale() rotate(0deg) translate(0px, px) skew(-20deg, deg); -webkit-box-shadow: 10px 10px 5px 5px #ffffff; -moz-box-shadow: 10px 10px 5px 5px #ffffff; box-shadow: 10px 10px 5px 5px #ffffff; } 

Answer 4

To answer @SvenBieder it is better to use something like this:

 body { background: #ddd; } h1 { position: relative; font-family: sans-serif; color: #fff; width: 400px; margin: 20px; padding: 5px; } /* In CSS3 it is ::before, but IE doesn't support this */ h1:before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: -5px; z-index: -1; background: #555; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); -ms-transform: skew(-20deg); transform: skew(-20deg); -webkit-box-shadow: 10px 10px 0px 3px #ffffff; -moz-box-shadow: 10px 10px 0px 3px #ffffff; box-shadow: 10px 10px 0px 3px #ffffff; } 

Real-time example: http://jsfiddle.net/fjPbr/1/

---

This is better because it does not distort the content and has less code.