在制作丝带效果之前,先讲解下如何利用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>
这样我们的丝带效果就制作完成了