使用CSS或SVG创建Tab形状

Question

有没有人知道如何使这个标签像形状一样：

Answer 1

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

该代码段有两个样本和

• 在父母身上使用transform: skew(45deg)和overflow: hidden来隐藏左侧的倾斜区域。
• 其他使用rotateX转换，位perspective以产生倾斜/倾斜边。 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>

Answer 2

选择一个<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 3

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 4

这是图：

设置after元素的边框，使其取消形状的顶部：）

.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 5

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>