Question

有没有人有任何想法只使用CSS实现这种角度标题效果？

Angled heading http://f.cl.ly/items/3P1X1t0V0y2j0Z1T3B1Q/angled-heading.png

使用像this这样的生成器，盒子阴影应该不是问题，但是我不确定角度边缘 - 也许是CSS3的转换？

Answer 1

写下这个：

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;
}

选中此http://jsfiddle.net/RP356/

Answer 2

只需转换即可实现：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 */

正如您所见here。

P.S。但请记住，“标题”文本和倾斜部分必须是单独的元素，以避免影响文本。

（如果文字是儿童，您可以使用相反的转换直接设置：transform:skew(30deg,0)。）

Answer 3

是的，它是变形。以下css是-20度。和一个白色的阴影

.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

为了@SvenBieder回答，最好使用这样的东西：

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;
}

实例：http://jsfiddle.net/fjPbr/1/

它更好，因为它不会扭曲内容并且代码更少。

CSS中的角度标题

4 个答案: