色带末端的 CSS

Question

如何仅使用 CSS 绘制像此图像左侧那样的丝带末端？

我知道我可以利用 CSS 中的 Angular 是斜接的这一事实，所以我可以有一个 div，其边框大小为 0，其他边框更大来给我三 Angular 形。有没有办法只用 1 个 div 来做到这一点？或者我需要堆叠一些三 Angular 形吗？我真的更喜欢有 1 个 div，这样用户就不必考虑这个，我可以只使用 CSS :before 伪元素来插入它。实现这一点的最佳方式是什么？

IE9+和其他浏览器的现代版本只需要支持。

Answer 1

HTML

<div class="ribbon">
   <strong class="ribbon-content">Everybody loves ribbons</strong>
</div>​

CSS

    .ribbon {
     font-size: 16px !important;
     width: 50%;
     position: relative;
     background: #ba89b6;
     color: #fff;
     text-align: center;
     padding: 1em 2em; /* Adjust to suit */
     margin: 2em auto 3em; 
    }
    .ribbon:before {
     content: "";
     position: absolute;
     display: block;
     bottom: -1em;
     border: 1.5em solid #986794;
     z-index: -1;
    }
    .ribbon:before {
     left: -2em;
     border-right-width: 1.5em;
     border-left-color: transparent;
    }

.ribbon .ribbon-content:before {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #804f7c transparent transparent transparent;
 bottom: -1em;
}
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}

See Demo

Reference