为了便于这几种图案的演示，我们先设定以下基础共通的样式

* { font-family: simhei, sans-serif; box-sizing: border-box; } html { font-size: 62.5%; } body { background-color: lightblue; } div { margin: 20px auto; } 实现旗帜

旗帜图案是下半部分被啃掉了一口的长方形，这一口是个三角形。

根据以上知识，我们很自然地就能想到实现方法，将border-bottom的颜色设置为透明的。

.flag { width: 0; height: 0; border: 2rem solid #FF6600; border-top-width: 4rem; border-bottom-color: transparent; border-bottom-width: 2rem; } 实现双实心箭头

双实心箭头则是由两个三角形组成的

为了减少页面的HTML元素，我们可以只提供一个元素实现第1个三角形，然后借助CSS3的伪类实现第2个三角形。
第1个三角形使用了相对定位，第2个三角形使用了绝对定位，使得第2个三角形能够紧挨着第1个三角形。

.rds-arrow-wrapper { position: relative; width: 20em; text-align: center; } .rds-arrow, .rds-arrow:after { display: inline-block; position: relative; width: 0; height: 0; border-top: 1rem solid transparent; border-left: 2rem solid #fff; border-bottom: 1rem solid transparent; border-right: 2rem solid transparent; } .rds-arrow { margin-left: 1rem; } .rds-arrow:after { content: ""; position: absolute; left: 100%; top: -1rem; bottom: 0; }

需要注意的是，箭头方向是向右的，但在CSS里面是通过border-left的颜色来控制的。

实现气泡

气泡是我们常见的一种图案，它是由一个三角形和一个长方形组成的。

由于三角形是放在长方形前面的，所以我们使用:before伪类，并设置绝对定位。

.bubble { position: relative; background-color: #33AAEE; width: 10rem; height: 3rem; font-size: 2rem; line-height: 3rem; color: #FFF; text-align: center; } .bubble:before { position: absolute; content: ""; right: 100%; top: 1rem; width: 0; height: 0; border-top: 0.6rem solid transparent; border-right: 0.6rem solid #33AAEE; border-bottom: 0.6rem solid transparent; border-left: 0.6rem solid transparent; } .bubble .text { display: inline-block; } 实现丝带

丝带的实现则稍微复杂一些，不过我们可以将它拆分成3个部分：

一个显示文字的长方形

左右两侧的耳朵（被啃了一口的长方形）

在下方用于显示阴影的两个小三角形

第1步：实现丝带主体长方形

.ribbon { position: relative; width: 10rem; height: 3rem; padding: 0.7rem 0; font-size: 1.6rem !important; color: #fff; text-align: center; background: #ff0066; }

第2步：实现丝带左右两侧的耳朵

:before伪类实现左耳朵，:after伪类实现右耳朵

.ribbon:before, .ribbon:after { content: ""; position: absolute; display: block; bottom: -0.6rem; border: 1.5rem solid #ff0066; z-index: -1; } .ribbon:before { left: -2.4rem; border-right-width: 1.5rem; border-left-color: transparent; box-shadow: 1px 1px 0 rgba(176, 102, 166, 0.8); } .ribbon:after { right: -2.4rem; border-left-width: 1.5rem; border-right-color: transparent; box-shadow: 0 1px 0 rgba(176, 102, 166, 0.8); }

第3步：实现阴影

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after { content: ""; position: absolute; display: block; border-style: solid; border-color: #bf004c transparent transparent transparent; bottom: -0.6rem; } .ribbon .ribbon-content:before { left: 0; border-width: 0.6rem 0 0 0.6rem; } .ribbon .ribbon-content:after { right: 0; border-width: 0.6rem 0.6rem 0 0; }

HTML代码：

<div> <span>金卡会员</span> </div>

最终效果：

页面实现

有以上的知识基础，实现本文开头的设计图就较为简单了。
由于代码较长，我就不贴出来了，请各位直接到GitHub上查看这个demo吧。

View Demo

总结

读完以上内容，是不是觉得实现这些图案变得很简单了？是不是感觉很酷？现在你可以叫自己为爸爸了。
三角形的运用场景非常之多，你尽可以发挥你的想象去实现它们！