在日常生活中,对话框还是蛮经常看到的,比如聊天工具中,今天我们就来学习下如果做这种对话框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dialaing</title>
</head>
<body>
<div class="dialaing">Hello EveryBody Im AllenYe</div>
<style>
.dialaing{
width:300px;
height:36px;
line-height: 36px;
text-align: center;
background-color: #a60;
border-radius: 6px;
color:#fff;
margin: 50px auto;
position: relative;
}
.dialaing::before{
content: "";
border-right:10px solid #a60;
border-left:0px solid #a60;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
position: absolute;
left:-10px;
top:8px;
}
</style>
</body>
</html>
这里使用了伪元素,先通过上章学习的画三角形
**border-right:10px solid #a60;border-left:0px solid #a60;border-top:10px solid transparent;border-bottom:10px solid transparent;**画出三角形,然后通过定位吧三角形定位到长方形上就行了
本文介绍了一种使用HTML和CSS创建对话框的方法,重点讲解如何利用伪元素和定位属性实现带有箭头的对话框效果,适合前端开发者学习。

被折叠的 条评论
为什么被折叠?



