创建CSS3形状？

Question

我需要在css中创建这种元素，比方说html

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

文字也会旋转，即使我已经说过，问题可能在哪里？

Answer 1

如果将旋转应用于伪元素，则文本不应旋转。

但我建议另一种解决方案来实现这种形状。 （这只适用于特定情况）

点击此处 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;
 }

Answer 2

这是@ Mihai解决方案的另一种替代方案：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;