創建CSS3形狀？

我需要在CSS創建這樣的元素，可以說HTML創建CSS3形狀？

<h3 class="section-heading">Hello</h3>

但是當我試圖像這樣

.section-heading:after{ 
-moz-transform: scale(1) rotate(359deg) translate(0px, 0px) skew(320deg, 0deg); 
-webkit-transform: scale(1) rotate(359deg) translate(0px, 0px) skew(320deg, 0deg); 
-o-transform: scale(1) rotate(359deg) translate(0px, 0px) skew(320deg, 0deg); 
-ms-transform: scale(1) rotate(359deg) translate(0px, 0px) skew(320deg, 0deg); 
transform: scale(1) rotate(359deg) translate(0px, 0px) skew(320deg, 0deg); 
}

文本somethign還可以獲得旋轉，甚至我有沒有說過之後，哪裏可以解決問題？

來源

2016-07-25 Miomir Dancevic

如果將旋轉應用於僞元素，則文本不應旋轉。

但我建議另一種解決方案來實現這種形狀。（這將工作僅在特定情況下）

在這裏看到jsfiddle

在元件上添加所需background-color，並用像:after僞元件創建一個三角形與90deg角度的所述background-color容器和它的位置上section-heading

HTML的右側

<h3 class="section-heading">Hello</h3>

CSS

body { 
    background:#fff; 
    } 

.section-heading:after{ 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 0 0 22px 22px; 
    border-color: transparent transparent #fff transparent; 
    position:absolute; 
    content:""; 
    right:0; 
    top:0; 

} 
.section-heading { 
    position:relative; 
    color:#fff; 
    background:blue; 
    width:200px; 
}

來源

2016-07-25 11:52:43

這裏的另一個替代@米哈伊的解決方案：

body { 
 
    background:#fff; 
 
    } 
 

 
.section-heading:after{ 
 
    width: 50px; 
 
    height: 100%; 
 
    background: blue; 
 
    position:absolute; 
 
    content:""; 
 
    transform: skewX(-20deg); 
 
    right:-25px; 
 
    top:0; 
 

 
} 
 
.section-heading { 
 
    position:relative; 
 
    color:#fff; 
 
    background:blue; 
 
    width:200px; 
 
}

<h3 class="section-heading">Hello</h3>

來源

2016-07-25 12:06:22

創建CSS3形狀？

回答

相關問題