利用纯css实现基本的三角形以及对话框
等边三角形
效果展示如下
![这里写图片描述](https://img-blog.csdn.net/20171026162737973?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2hpcmxleV9zaGFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
实现代码如下
.regular-triangle {
width:0;
height:0;
border-bottom: 20px solid #000;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
直角三角形
效果展示如下
![这里写图片描述](https://img-blog.csdn.net/20171026162944805?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2hpcmxleV9zaGFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
实现代码如下
.regular-triangle {
width:0;
height:0;
border-bottom: 20px solid #000;
border-right: 20px solid transparent;
}
对话框
效果展示如下
![这里写图片描述](https://img-blog.csdn.net/20171026163817733?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2hpcmxleV9zaGFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
实现代码如下
.dialog {
width:100px;
height:75px;
border-radius:5px;
position:relative;
}
.dialog:before {
content: "";
position: absolute;
left: 100%;
width: 0;
height: 0;
top: 20px;
border-left: 15px solid #333;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}