好物推荐、技巧分享
实践是学习的最佳途径

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

想要实现的效果如下:

第一步:如何用css画出三角形?

/* css画三角形 */
.sanjiao{
width:0;
border-top:40px solid red;
border-bottom:40px solid green;
border-left:40px solid blue;
border-right:40px solid yellow;
}

如下显示

要显示一个三角形,那么去掉其他三个三角形即可。 如果删掉其他三条边,那剩下的一条边也不会显示,最好是让其他三条边显示透明。

/* 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上的聊天窗口中说完话之后,就会有个文字泡,这个文字泡有这个箭头指向头像。如下:

赞(1)
未经允许不得转载:蓝色创想 » 巧用css伪元素before/after和画三角形做搭配的应用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

实践是学习的最佳途径

了解更多联系我们
本次查询31 次 用时0.093 秒

已稳定运行