最近闲来无事一直在研究css的伪元素就随手撸了个对话框好了话不多说看代码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>dialog</title>
    <link rel="stylesheet" href="demo051.css">
</head>
<body>
    <div class="dialog">Hello Everyone,I'm honglp</div>
    <!-- <div class="duk">YES</div> -->
</body>
</html>

CSS代码


.dialog {
  background: #6a6;
  margin: 50px auto;
  width: 300px;
  height: 25px;
  line-height: 25px;
  padding: 10px;
  border-radius: 6px;
  color: #fff;
  position: relative;
}

.dialog::before {
  content: "";
  border-left: 0px solid #6a6;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #6a6;
  position: absolute;
  left: -10px;
  bottom: 12px;
}

其实最主要的还是画三角形

 border-left: 0px solid #6a6;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-right: 10px solid #6a6;
 width: 0px;
 height: 0px;

这个原理呢就是线条很粗并且有透明色，记住宽度和高度一定要设置为0 上面我没有设置是因为元素我是动态生成的

好了，分享就到这里，喜欢可以帮助到大家，大家有不懂的地方也可以在下方给我评论我会为大家解答的

来源：https://blog.csdn.net/weixin_42526648/article/details/100120192

标签

css