CSS中的角度標題

Question

有沒有人有任何想法只用CSS實現這種角度標題效果？

使用像這樣的生成器，盒子陰影不應該是一個問題，但我不確定角度邊緣 - 也許是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 */

正如你在這里看到的那樣。

PS但是請記住“標題”文本和傾斜部分必須是單獨的元素，以避免影響文本。

（如果文本是孩子，你可以使用相反的變換直接設置： 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/

---

它更好，因為它不會扭曲內容，而且代碼更少。