思路:通过border宽度和颜色来设置三角形
1、无边框的三角形
<h3>无边框的三角形</h3>
<p>向上的三角形</p>
<div class="up"></div>
<p>向下的三角形</p>
<div class="down"></div>
.up{
width:0;
height:0;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:0 auto;
position:relative;
}
.down{
width:0;
height:0;
border-width:30px 30px 0 30px;
border-style:solid;
border-color:#333 transparent transparent;/*灰 透明 透明*/
margin:0 auto;
position:relative;
}
结果截图如下:
2、有边框的三角形
<h3>有边框的三角形</h3>
<p>向左的三角形</p>
<div class="left"><span></span></div>
<p>向右的三角形</p>
<div class="right"><span></span></div>
.left{
width:0;
height:0;
border-width:30px 30px 30px 0;
border-style:solid;
border-color:transparent #333 transparent transparent;
/*透明 灰 透明 透明 */
margin:40px auto;
position:relative;
}
.left span{
display:block;
width:0;
height:0;
border-width:28px 28px 28px 0;
border-style:solid;
border-color:transparent #fc0 transparent transparent;
/*透明 黄 透明 透明 */
position:absolute;
top:0;
left:0;
box-shadow:0 0 2px rgba(0,0,0,1); /*给left的span加一个阴影*/
}
.right{
width:0;
height:0;
border-width:30px 0 30px 30px;
border-style:solid;
border-color:transparent transparent transparent #333;
/*透明 透明 透明 灰*/
margin:0 auto;
position:relative;
}
.right span{
display:block;
width:0;
height:0;
border-width:28px 0 28px 28px;
border-style:solid;
border-color:transparent transparent transparent #fc0;
/*透明 透明 透明 黄*/
position:absolute;
top:-28px;
left:-29px;
}
有边框的三角形的位置设置需要注意:我们看到的三角形是边,而不是真的具有内容的区域。且绝对定位,是根据相对定位父层内容的边界计算的,而在我们最初的定位中,内容的宽度和高度都为0,即内容就是div的中心点,我们absolute的定位会以这个中心点作为参考来移动,如向左的三角形。
结果截图如下:
3、直角三角形
<h3>直角三角形</h3>
<div class="right-tri1"><span></span></div>
<div class="right-tri2"><span></span></div>
.right-tri1{
width:0;
height:0;
border-width:30px;
border-style:solid;
border-color:transparent #fc0 #fc0 transparent;
margin: 0 auto;
}
.right-tri2{
width:0;
height:0;
border-width:30px;
border-style:solid;
border-color:transparent transparent #fc0 transparent;
margin: 0 auto;
}
结果截图如下:
4、实现气泡框
<h3>气泡框的三角形</h3>
<div class="bubble">
<a href="#">芃芃其麦</a>
<div class="popup">
<span><em></em></span>气泡框三角形
</div>
</div>
.bubble{
width:200px;
height:80px;
margin:0 auto 20px;
position:relative;
}
a{
color:#333;
font-weight:bold;
text-decoration:none;
}
.popup{
width:100px;
background:#fc0; /*黄色*/
padding:10px 20px;
color:#333;
border-radius:4px;
position:absolute;
top:30px;
left:30px;
border:1px solid #333;
}
.popup span { /*span设置成三角形外面的边框*/
display:block;/* 要设置成block才能设置宽高*/
width:0;
height:0;
border-width:0 10px 10px; /*上0下10,左右10*/
border-style:solid;
border-color:transparent transparent #333;
/*上transparent 左右transparent 下灰*/
position:absolute;
top:-10px; /*span是div子元素,要往上移border-width*/
left:50%;/* 三角形居中显示 */
margin-left:-10px;/* 三角形居中显示 */
}
em{/*em设置成里边黄色的三角形*/
display:block;
width:0;
height:0;
border-width:0 10px 10px;
border-style:solid;
border-color:transparent transparent #fc0;
position:absolute;
top:1px;/*em是span的子元素,所以向下一点就行,top为1px*/
left:-10px;
}
结果截图如下:
参考文档:https://www.cnblogs.com/blosaa/p/3823695.html