border-width实现回复效果_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

border-width实现回复效果_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:37 AM

一、发现

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

开始还以为是用图片实现的，额...。像博客园这种访问量大的网站，能用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 class="reply_item">            <div class="reply_img">                <a href="http://www.cnblogs.com">                    <img src="/static/imghw/default1.png"  data-src="1.jpg"  class="lazy" alt="用户头像" />                </a>            </div>            <div class="reply_content">                好文，要攒                <div class="dot"></div>                <div class="top"></div>            </div>        </div>    </div></body></html>

로그인 후 복사

2.4 效果图：

三、总结

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.