用CSS画三角形和提示框

CSS也可以实现一些好玩的东西,比如我们用CSS实现一个三角形。
原理:需要把元素的宽度、高度设置为0,然后为其设置边框。需要哪个边框设置哪个边框的颜色,相邻边框的颜色设置color为transparent,对应边框可以设置color为transparent也可以不设置。代码如下:





用CSS画三角形







效果如下:
image.png

用CSS实现一个提示框:先设置好边缘框,再画一个三角形定位在边缘框上,再画一个白色三角形,调整其定位使其覆盖掉前面三角形的某一边。代码如下:





效果如下:
image.png

个人前端学习笔记均为原创。
首发CSDN: Freya_yyy的博客 。欢迎交流和指导。
我是木风,愿你遇见美好!

你可能感兴趣的:(用CSS画三角形和提示框)