css - 创建 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 Angular 的三 Angular 形使用容器的 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;
 }