纯Css实现三角形
上下左右箭头
效果图片
HTML
<!-- 向上的三角形 -->
<div class="triangle_border_up"></div>
<!-- 向下的三角形 -->
<div class="triangle_border_down"></div>
<!-- 向左的三角形 -->
<div class="triangle_border_left"></div>
<!-- 向右的三角形 -->
<div class="triangle_border_right"></div>
Css
/*向上*/
.triangle_border_up {
width: 0;
height: 0;
border-width: 0 30px 30px;
border-style: solid;
border-color: transparent transparent #FFCCCC;
/*透明 透明 黄*/
margin: 40px auto;
position: relative;
}
/*向下*/
.triangle_border_down {
width: 0;
height: 0;
border-width: 30px 30px 0;
border-style: solid;
border-color: #FFCCCC transparent transparent;
/*黄 透明 透明 */
margin: 40px auto;
position: relative;
}
/*向左*/
.triangle_border_left {
width: 0;
height: 0;
border-width: 30px 30px 30px 0;
border-style: solid;
border-color: transparent #FFCCCC transparent transparent;
/*透明 黄 透明 透明 */
margin: 40px auto;
position: relative;
}
/*向右*/
.triangle_border_right {
width: 0;
height: 0;
border-width: 30px 0 30px 30px;
border-style: solid;
border-color: transparent transparent transparent #FFCCCC;
/*透明 透明 透明 黄*/
margin: 40px auto;
position: relative;
}
左上、左下、右上、右下箭头
效果图片
HTML
<!-- 左上 -->
<div class="triangle_border_nw"></div>
<!-- 左下 -->
<div class="triangle_border_sw"></div>
<!-- 右上 -->
<div class="triangle_border_ne"></div>
<!-- 右下 -->
<div class="triangle_border_se"></div>
Css
/* 左上 */
.triangle_border_nw {
width: 0;
height: 0;
border-width: 30px 30px 0 0;
border-style: solid;
border-color: #CCCCFF transparent transparent transparent;
margin: 40px auto;
position: relative;
}
/* 左下 */
.triangle_border_sw {
width: 0;
height: 0;
border-width: 30px 0 0 30px;
border-style: solid;
border-color: transparent transparent transparent #CCCCFF;
margin: 40px auto;
position: relative;
}
/* 右上 */
.triangle_border_ne {
width: 0;
height: 0;
border-width: 30px 0 0 30px;
border-style: solid;
border-color: #CCCCFF transparent transparent transparent;
margin: 40px auto;
position: relative;
}
/* 右下 */
.triangle_border_se {
width: 0;
height: 0;
border-width: 30px 30px 0 0;
border-style: solid;
border-color: transparent #CCCCFF transparent transparent;
margin: 40px auto;
position: relative;
}
气泡框的三角形
效果图片
HTML
<div class="test_triangle_border">
<div class="popup">
纯CSS写带边框的三角形
</div>
</div>
Css
.test_triangle_border {
width: 200px;
margin: 0 auto 20px;
position: relative;
}
.test_triangle_border .popup {
width: 100px;
background: #99FF99;
padding: 10px 20px;
color: #333;
border-radius: 4px;
position: absolute;
top: 30px;
left: 30px;
border: 1px solid #333;
}
.test_triangle_border .popup::before {
content: '';
width: 0px;
height: 0px;
border-width: 0 10px 10px;
border-style: solid;
border-color: transparent transparent #333;
left: 50%;
top: -10px;
position: absolute;
margin-left: -10px;
}
.test_triangle_border .popup::after {
content: '';
width: 0px;
height: 0px;
border-width: 0 10px 10px;
border-style: solid;
border-color: transparent transparent #99FF99;
left: 50%;
top: -9px;
position: absolute;
margin-left: -10px;
}