在制作丝带效果之前，先讲解下如何利用css制作三角形<div class="border"></div><style>.border{width:0;height:0;border-top:20px
在制作丝带效果之前，先讲解下如何利用css制作三角形
<div class="border"></div><style>.border{ width:0; height:0; border-top:20px solid red; border-right:20px solid blue; border-bottom:20px solid green; border-left:20px solid yellow; margin:100px auto; }</style>以上代码的实现效果如下
由图可见，当需要一个向下的三角形时，只需要将其他三边的边框颜色改为透明即可，而三角形的大小则由边框的宽度绝对。调整border-top-widt可改变三角的高度，改变border-right-width和border-left-width时可改变三角形的宽度。其他朝向的三角形同理。
了解如何制作三角形之后我们来讲解一下第一个图中的丝带效果2到底是如何实现的注：在写样式前我们一般需要做一步就是分割设计图，我们可以把上图的丝带分割成三部分，即中间的文字部分，为一个长方形，下面的三角形，和后面的三角形，分割完之后我们分别来用代码写出来，最后通过定位将三部分组装起来即可
代码实现如下
<span class="ribbon2">丝 带 效 果 2</span><style> /*这个样式实现的是中间的主题长方形部分*/ .ribbon2 { display: inline-block; width: 60px; padding: 10px 0; background: #F47530; top: -6px; left: 25px; position: absolute; text-align: center; border-top-left-radius: 3px; } /*而下面和背后的三角形我们为了方便将使用伪类before和after来制作*/ /*接下来我们实现下面的三角效果*/ .ribbon2:after { height: 0; width: 0; border-left: 30px solid #F47530; border-right: 30px solid #F47530; border-bottom: 30px solid transparent; bottom: -30px; left: 0; } /*最后我们实现后面的三角效果*/ .ribbon2:before { height: 0; width: 0; border-bottom: 6px solid #8D5A20; border-right: 6px solid transparent; right: -6px; top: 0; }</style>这样我们的丝带效果就制作完成了
