我们想要实现的是这样的效果

很明显这是由左边一个小三角形和右面的长方形组成的
我们只想用到一个div盒子,应该怎么做最方便呢?
那我们就必须要用到伪元素了,左边的那个小三角形就是通过伪元素选择器完成的
我们有必要说一下画三角形的技巧:
这里需要讲一下border属性,当元素border很大而元素的宽和高为零的时候,border实际显示的是一个矩形,而如果只显示其中一条边,那么看起来的形状就是一个三角形。
下面是对话框的代码:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>对话框</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="dialog">Hello I am zyj</div>
</body>
</html>
css:
.dialog {
width: 200px;
height: 30px;
background-color: #6A6;
margin: 30px auto;
color: #fff;
padding-left: 20px;
border-radius: 6px;
line-height: 30px;
position: relative;
}
.dialog::before {
content: "";
/* 三角形部分通过边框完成*/
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid #6A6;
/*子绝父相 绝对定位在长方形左边*/
position: absolute;
left: -9px;
top: 6px;
}
本文介绍如何仅用一个div实现一个由小三角形和长方形构成的对话框效果,通过CSS伪元素`:before`和`border`属性巧妙地绘制三角形,适合前端开发者学习CSS技巧。

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



