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

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:蓝色创想 » 巧用css伪元素before/after和画三角形做搭配的应用

分享到: 生成海报
本站源码仅供学习交流,如需商用请在官方购买正版。技术服务为增值服务。如有问题看联系站长QQ:1305675066

评论 抢沙发

实践是学习的最佳途径

了解更多联系我们
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活