创建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形状？

回答

相关问题