创建 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 这样的伪元素创建一个与容器的 background-color 成 90deg 角的三角形并将其放置在 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 解决方案的另一种替代方法：

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>

创建 CSS3 个形状？

Creating CSS3 shapes?

css

rotation

skew