CSS中的角度标题

Question

Does anyone have any ideas to achieve this angled heading effect with CSS only?

The box shadow shouldn't be a problem using a generator like this , but I'm unsure on the angled edges - perhaps CSS3's transform?

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 this http://jsfiddle.net/RP356/

Answer 2

You can achieve that with just 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 the “Heading” text and the skewed part have to be separate elements to avoid affecting the text too.

(In case the text is a child, you could set it straight using the opposite transformation: transform:skew(30deg,0) .)

Answer 3

Yes it is transform. Following css does it for -20 degrees. and a 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

In order to @SvenBieder answer, 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;
}

Live example: http://jsfiddle.net/fjPbr/1/

---

It's better because it don't skew the content and it has less code.