(一)三角形实现原理
(1)三角形的实现原理是宽高都不设置(即为0),只设置边框,如果四个边框都设置宽度(border-width)、样式(border-style)和颜色(border-color)。(2)当四个边框的宽度形同的时候
- 效果图如下
![]()
- html结构
<div class="box-width-equal">边框的宽度相同</div>
- css样式
.box-width-equal{ width: 400px; height: 400px; margin: 10px auto; position: relative; } .box-width-equal::before{ content: ''; position: absolute; border-left: 200px solid orange; border-top: 200px solid red; border-bottom: 200px solid orchid; border-right: 200px solid bisque; }
(3)当四个边框的宽度不相同的时候
- 效果图如下
![]()
- html结构
<div class="box-width-unEqual">边框的不宽度相同</div>
- css样式
.box-width-unEqual{ width: 400px; height: 400px; margin: 10px auto; position: relative; } .box-width-unEqual::before{ content: ''; position: absolute; border-left: 250px solid orange; border-top: 120px solid red; border-bottom: 280px solid orchid; border-right: 150px solid bisque; }
(二)两个三角形重叠时,高度偏移量的实现原理
(1)原理图![]()
(三)实心三角形(视觉上没有边框)
(1)效果图
(2)HTML结构<body> <div class="dialog-noBorder">实心三角形(视觉上没有边框)</div> </body>
(3)CSS样式* { margin: 0; padding: 0; } .dialog-noBorder { width: 300px; height: 150px; background: orchid; margin: 0 auto; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; position: relative; border: 10px solid orchid; /*此处的边框大小会影响第二个三角形到顶部的偏移量,一般是1.4倍*/ } .dialog-noBorder::before { content: ''; position: absolute; top: 150px; left: 120px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid orchid; }
(四)空心三角形(视觉上有边框)
(1)效果图
(2)HTML结构<body> <div class="dialog-border">空心三角形(视觉上有边框)</div> </body>
(3)CSS样式.dialog-border { width: 300px; height: 150px; background: orchid; margin: 50px auto; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; position: relative; border: 10px solid red; /*此处的边框大小会影响第二个三角形到顶部的偏移量,一般是1.4倍*/ } .dialog-border::before { content: ''; position: absolute; top: 150px; left: 120px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid red; } .dialog-border::after { content: ''; position: absolute; top: 136px; left: 120px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid orchid; }