使用 CSS 或 SVG 创建 Tab 形状

Question

有没有人知道如何使这个选项卡形状像：

Answer 1

拿一个<div>，然后申请：

div {
    background:red;
    width:500px;
    height:150px;
    position:relative;
}
div:after {
    content:'';
    position:absolute;
    background:white;
    border:40px solid;
    border-bottom:0;
    border-color:white white red red;
    top:0;
    right:0;
    width:30%;
}

<div></div>

Answer 2

div {
    background:brown;
    width:500px;
    height:100px;
    position:relative;
}
div:after {
    content:'';
    position:absolute;
    background:white;
    border:40px solid;
    border-bottom:0;
    border-color:white white brown brown;
    top:0;
    right:0;
    width:30%;
}

<div></div>

Answer 3

这是图：

设置后元素的边框，使其抵消形状的顶部:)

.box {
  position: relative;
  background-color: tomato;
  width: 300px;
  height: 200px;
}
.box:before {
  content:"";
  position: absolute;
  right: 0;
  width: 100px;
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
  border-top: 15px solid white;
}
.box span {
  
}

<figure class="box"><br><span>Here you get a nice folder like figure :D</span></figure>

Answer 4

CSS 解决方案通过在棕色顶部放置一个白色形状来创建标签形状。如果你在形状后面有东西，那可能是不可取的。

这是您图片的 SVG 复制品。

<svg width="396" height="120" viewBox="0 0 396 120">
  <path d="M 0,33 H 198 L 228,63 H 396 V 120 H 0 Z" fill="#c94935"/>
</svg>

Answer 5

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

代码段有两个示例，并且

在父级上使用 transform: skew(45deg) 和 overflow: hidden 来隐藏左侧的倾斜区域。
其他使用 rotateX 转换和一点 perspective 来产生 skewed/angled 面。 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>

使用 CSS 或 SVG 创建 Tab 形状

Creating a Tab shape with CSS or SVG

html

css

svg

css-shapes