与有角度的形状的横幅
这个问题在这里已经有了答案：
只要你已经尝试过帮助你，但它没有像你期望的那样工作......所以基本的想法是，我们可以使用CSS伪元素来创建该效果。
演示
.wrapper {
background: #C3C3C3;
padding: 20px;
font-size: 40px;
font-family: Arial;
text-align: center;
position: relative;
}
.wrapper:after {
content: "";
width: 0;
height: 0;
border-top: 42px solid transparent;
border-bottom: 42px solid transparent;
border-right: 40px solid white; /* Tweak this to increase triangles height */
position: absolute;
right: 0;
top: 0;
}
在这里，我什么都不做，我们使用了一个伪元素，即只是一个虚拟元素，它不存在于DOM中，但我们可以使用CSS插入它，并将伪元素定位到包装的右侧。 这将帮助你获得像最后一样的功能区。 请注意，三角形的颜色是硬编码的，并且不透明。
试试这个工作
.wrapper {
font-family: arial;
font-size: 12px;
color: white;
background-color: black;
border: 1px solid white;
padding: 8px;
width: 100px;
text-align: center;
position: relative;
}
.wrapper:after {
content: '';
position: absolute;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-right: 16px solid white;
z-index: 10;
top: 0px;
right: 0px;
}<div class="wrapper">TEXT HERE</div>这里是小提琴。 https://jsfiddle.net/nileshmahaja/s5egaebr/
我已经使用：选择器后的包装div。
CSS
.wrapper {
padding: 0 50px;
font-size: 0px;
line-height: 0%;
width: 0px;
height:120px;
background:#ddd;
position:relative;
width:500px;
}
.wrapper:after {
content:'';
width: 0px;
height: 0px;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-right: 60px solid #fff;
position:absolute;
right:0
}