如何用css画出三角形和聊天气泡框
2022-08-13 本文已影响0人
欢宝吖_
这几天学习了一个新知识，也是一个著名的前端面试题，那就是用css画出一个三角形！！！
那今天欢宝就来给大家分享一下如何用css画一个三角形和气泡框吧！！！
如何用css画出一个三角形
第一步
写一个正常的盒子模型，先给个正方形的div，便于观察，给div设置宽高和背景颜色
html代码块
<body>
<div class="box"></div>
</body>
css代码块
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
第一步效果图
第一步.png
第二步
便于观察，给div设置四个不同颜色的的边框border
css代码块
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
border-left: 50px solid skyblue;
border-right: 50px solid yellow;
border-bottom: 50px solid yellowgreen;
border-top: 50px solid violet;
}
</style>
第二步效果图
四种不同颜色的边框，已经可以看出来，四个边框差个尖尖就是三角形
第二步.png
第三步
把中间的div的宽高设置为0像素，即可得到四个等腰三角形
css代码块
<style>
.box {
width: 0px;
height: 0px;
background-color: pink;
border-left: 50px solid skyblue;
border-right: 50px solid yellow;
border-bottom: 50px solid yellowgreen;
border-top: 50px solid violet;
}
</style>
第三步效果图
第三步.png
第四步
- 我们需要哪一边的三角形，把另外三边的边框设置透明transparent即可
- 比如我现在需要上面的三角形，我就可以把左右下的边框设置透明,并且把div的背景色删掉或者注释掉
css代码块
<style>
.box {
width: 0px;
height: 0px;
/* background-color: pink; */
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-top: 50px solid violet;
}
</style>
第四步效果图
第四步.png
需要其他一边的三角形，只需把另外三边的边框设置透明即可
如何用css画一个聊天时经常看见的气泡框
上面我们已经画出了三角形，我们只需要利用伪元素把三角形和一个长方形结合起来就可以了
html代码块
<body>
<div class="box"></div>
</body>
css代码块
可以根据需求调整css样式，调整大小和位置
<style>
.box {
width: 200px;
height: 100px;
/*父级给相对定位，伪元素根据父级给绝对定位 */
position: relative;
background-color: violet;
border-radius: 20px;
}
.box::after {
content: '';
width: 0px;
height: 0px;
border: 20px solid;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-top: 20px solid violet;
/*给绝对定位，根据需求设置三角形的位置*/
position: absolute;
top: 100px;
left: 50px;
}
</style>
气泡框效果图
气泡框.png
