CSS3实现空心、实心三角指示箭头(利用border的设置实现)
其他
2018-08-19 19:14:52
阅读次数: 0
(一)三角形实现原理
(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; }
转载自blog.csdn.net/qq_38658877/article/details/78114119