一种:before和:after的箭头效果实践

今天在网上看到有个很不错的箭头标题效果

 

一看原来是用:before和:after实现的，并且利用了border来制作小三角的方法，觉得很不错，于是自己也试着写了个demo，感觉运用在工作当中也是非常的不错。

 

不多说，上代码：

 

 

<div class="list">
    <div class="wrap">
        <h2>这是标题的左边 <a href="#">红色箭头</a></h2>
    </div>
    <ul>
    	<li>微博里也可以方便的管理相册并把图片转播给你的听众</li>
        <li>想用更多美图、照片等诠释你的个性并分享给好友？</li>
        <li>微博里也可以方便的管理相册并把图片转播给你的听众</li>
    </ul>
</div>

 

 

<style>
* {margin:0; padding:0;}
body {font-family:\5FAE\8F6F\96C5\9ED1;font-weight: 300; font-size: 13px;line-height: 1.4;}
h1, h2, h3 {font-weight: 300; }
h2 {font-size:14px;position: relative; line-height:2; padding-left:10px;}
.list {width:250px; background:#fff; margin:10px; border:1px solid #eee;}
.wrap {background:#eee;}
.wrap h2 a {float: right;position: relative;text-decoration: none;color:#fff;padding: 0 10px;border-left: 5px solid white; background:#cc0000;-webkit-transition:padding 0.1s linear;-moz-transition:padding 0.1s linear;-ms-transition:padding 0.1s linear;-o-transition:padding 0.1s linear;}
.wrap h2 a:hover {padding:0 14px;}
.wrap h2 a:before,
.wrap h2 a:after {content: "";position: absolute;top: 50%;width: 0;height: 0;}
.wrap h2 a:before {left: -12px;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid white;margin-top:-8px;}
.wrap h2 a:after {left: -5px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #cc0000;margin-top:-6px;}
.list ul {padding:10px; list-style-type:none;}
.list ul li {padding:5px 0; border-bottom:1px dotted #eee;}
</style>

 

分解说明:

 

 

效果截图:

 

加了点css3显得更加文艺一点...

恩，就是这样，大家可以试试，很好玩的。

 

当然这只是很简单的一个小效果，不过想法非常不错，我觉得很多需要做这种类似效果的时候都可以考虑用这个方法来实现，非常简单。