原理:当盒子的宽高为0 时,四边将会以三角形的形式进行衔接,先将其他的都隐藏起来(利用transparent设置透明),然后单独给想要小三角的那个设计颜色
.box1 {
/* 当盒子的宽高为0 时,四边将会以三角形的形式进行衔接 */
width: 0;
height: 0;
border-top: 10px solid pink;
border-right: 10px solid yellowgreen;
border-bottom: 10px solid blue;
border-left: 10px solid purple;
}
效果如图:,就得到了小三角,只需将其他的都隐藏起来只留下需要的那个(有点排他思想的感觉)
.box2 {
width: 0;
height: 0;
/* transparent指定透明度,可以将其他几个隐藏起来 */
border: 50px solid transparent;
border-top-color: blue;
margin: 100px auto;
}
最后效果是
运用:可以做一个类似于对话框的
原理:先设置一个盒子,然后用定位在边边上放一个同颜色的小三角
html布局:
<div class="jd">
<span></span>
</div>
CSS
.jd {
position: relative;
width: 50px;
height: 200px;
background-color: rgb(189, 189, 241);
margin: 200px auto;
}
.jd span {
position: absolute;
top: -10px;
left: 20px;
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: rgb(189, 189, 241);
}