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

想要实现的效果如下:

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

 

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

posted @   刘一二  阅读(21097)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae