你的位置:首页 > 网页设计

[网页设计]border回复效果


一、发现

前端渣哥逛博客园,经常看到博文评论有这种如下这种效果:

开始还以为是用图片实现的,额...。像博客园这种访问量大的网站,能用js/css实现的就不会用图片代替,果然,仔细一看,两个span就能实现这个效果了。

二、实现

看到不会或者不清楚的,总想探个究竟,并把知识变成自己的。接下来就花点时间,实现这种效果。

2.1 以span 设置 border-width:20px; 为例,这样相当于一个 40*40 的正方形(上下(20*2)和左右(20*2)),然后平分成4份,怎么平分呢,上下左右4个全等三角型就是了。既然这样,我们就可以轻松实现以下效果了:

       

2.2 有了上面的做法,我们同样可以再用一个span,实现如下效果:

这样,把浅蓝色部分换成白色,就可以实现遮挡,再通过绝对定位,就可以实现我们想要的效果了。

2.3 完整代码

<!DOCTYPE><html><head>      <title>css实现博客园回复效果</title>  <style type="text/css">    *{margin:0;padding:0;}    #reply{    	width:600px;    	margin:0 auto;    }    .reply_item{    	padding:10px 20px;    	border-bottom:1px solid #EDD98B;    }    .reply_img{    	float:left;        }    .reply_img a{    	float:left;    	margin-top:20px;    	text-decoration:none;    	color:#fff;    }     .reply_img img{    	width:60px;    	height:60px;    	border-radius:40px;    }            .reply_content{    	margin-left:110px;    	background:#beceeb;    	padding:30px 20px;    	border-radius:18px;    	position:relative;    }    .dot{    	border-style:solid;    	border-width:20px;    	border-color:#fff #beceeb #beceeb #fff;    	position:absolute;    	left:-40px;    	top:40px;    }    .top{    	border-style:solid;    	border-width:10px 20px;    	border-color:transparent #fff #fff transparent;    	position:absolute;    	left:-40px;    	top:60px;    }  </style></head><body>  <div id="reply">    <div >      <div >        <a href="http://www.cnblogs.com">          <img src="1.jpg" alt="用户头像" />        </a>      </div>      <div >        好文,要攒        <div ></div>        <div ></div>      </div>    </div>  </div></body></html>

2.4 效果图:

三、总结

一个简单的demo,以此小记。代码不自己敲就不是你的,有空逛逛园子总会有收获。