html - 使用 CSS 或 SVG 创建 Tab 形状

Question

有没有人知道如何使这个标签像形状:

Answer 1

这是使用 CSS3 转换实现所需形状的替代方法。与 SVG 答案一样，当背景(形状后面)不是纯色时也可以使用此方法。

该片段有两个示例和

• 在父级上使用 transform: skew(45deg) 和 overflow: hidden 来隐藏左侧的倾斜区域。
• 其他使用带有一点透视 的rotateX 变换来产生倾斜/倾斜的一面。 transform-origin 设置意味着只有一侧是倾斜的。

div.a {
  position: relative;
  height: 70px;
  width: 250px;
  margin-top: 20px;
  padding: 24px 4px 0px;
  overflow: hidden;
}
div.a:before {
  position: absolute;
  content: '';
  top: 20px;
  left: 0px;
  width: 100%;
  height: 50px;
  background: #c94935;
  z-index: -1;
}
div.a:after {
  position: absolute;
  content: '';
  top: 0px;
  left: -20px;
  width: 60%;
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  transform: skew(45deg);
  height: 20px;
  background: #c94935;
  z-index: -1;
}
div.b {
  position: relative;
  height: 50px;
  width: 250px;
  padding: 4px 4px 0px;
  margin-top: 40px;
  background: #c94935;
}
div.b:before {
  position: absolute;
  content: '';
  top: -20px;
  left: 0px;
  width: 50%;
  height: 20px;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: perspective(10px) rotateX(5deg);
  -moz-transform: perspective(10px) rotateX(5deg);
  transform: perspective(10px) rotateX(5deg);
  background: #c94935;
}
body {
  background: url(http://lorempixel.com/500/500);
}

<div class="a">
  Lorem Ipsum Dolor Sit Amet...
</div>
<div class="b">
  Lorem Ipsum Dolor Sit Amet...
</div>