css伪元素before/after和画三角形的搭配应用

时间：2015-09-11 12:30:26 收藏：0 阅读：13262

想要实现的效果如下:

技术分享

第一步：如何用css画出三角形？

 1 /* css画三角形 */
 2 .sanjiao{
 3     width:0;
 4     border-top:40px solid red;
 5     border-bottom:40px solid green;
 6     border-left:40px solid blue;
 7     border-right:40px solid yellow;
 8 }
 9 
10 <div class="sanjiao">
11 </div>

如下显示

技术分享

要显示一个三角形，那么去掉其他三个三角形即可。

如果删掉其他三条边，那剩下的一条边也不会显示，最好是让其他三条边显示透明。

/* css画三角形 */
.sanjiao{
    width:0;
    border-width:40px;
    border-style:solid;
    border-color:red transparent transparent transparent; /* transparent 设置边框颜色透明 */
}

<div class="sanjiao">
</div>

如下显示

技术分享

第二步：如何让三角形紧贴在元素上？

可以定义一个标签，如上画出三角形；也可以用before和after伪元素画出三角形。

利用position定位使得三角形紧贴在元素上的指定位置。

完整代码如下:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.wrap{
    margin-top:30px;
    text-align:center;
}
.jiantou{
    display:inline-block;
    padding:10px;
    background:#2E963D;
    color:#FFF;
    border-radius:8px;
    
    position:relative;
}

/* 下箭头 */
.jiantou:after{
    display:block;
    content:‘‘;
    border-width:8px 8px 8px 8px;
    border-style:solid;
    border-color:#ff4d4d transparent transparent transparent;
    
    /* 定位 */
    position:absolute;
    left:40%;
    top:100%;
}
/* 上箭头 */
.jiantou:before{
    display:block;
    content:‘‘;
    border-width:8px 8px 8px 8px;
    border-style:solid;
    border-color:transparent transparent #ff4d4d transparent;
    
    /* 定位 */
    position:absolute;
    left:40%;
    top:-16px;
}
</style>
</head>

<body>
<div class="wrap">
    <span class="jiantou">LIUCHUAN</span>
</div>
</body>
</html>

如第一幅图片

小结：QQ上的聊天窗口中说完话之后，就会有个文字泡，这个文字泡有这个箭头指向头像。如下：

技术分享

用这种方法可以实现如上文字泡效果。