css3制作丝带效果

原创
2016/06/01 20:32
阅读数 291

输入图片说明

在制作丝带效果之前,先讲解下如何利用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>

这样我们的丝带效果就制作完成了

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部