使用CSS或SVG创建标签形状

Question

有谁知道如何使此选项卡形状：

Answer 1

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

该代码段有两个样本，

• 一种使用transform: skew(45deg)和overflow: hidden在父对象上以隐藏左侧的倾斜区域。
• 其他人使用带有一点perspective的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> 

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>