如何使用CSS3制作这个形状？

Question

我很难用CSS3创建这个形状。我打算将它用作功能区的末尾。我找到了解释如何创建完整功能区的文章，但不仅仅是结尾。

Answer 1

您可以使用::before和::after伪元素来实现此效果：

WORKING DEMO

<div class="ribbon"></div>

.ribbon {
    width: 100px;
    background: #000;
    color: #FFF;
    padding: 10px;
    margin-left: 20px;
    position: relative;
}

.ribbon::before,
.ribbon::after{
    content: "";
    border: 20px solid transparent;
    border-right: 20px; solid #000;
    position: absolute;
}

.ribbon::before {
    border-top: 20px solid #000;
    top: 0;
    left: -20px;
}

.ribbon::after{
    border-bottom: 20px solid #000;
    bottom: 0;
    left: -20px;
}