三角形是在网页应用中一种常见的图形,我们用CSS3
技术可以很容易的绘制出来。
首页我们先定义好相应的html结构:
<div class="wrap">
<span class="rank-label"></span>
</div>
接下来,我们开始正式的编写样式:
.wrap {
width: 200px;
height: 100px;
border: 1px solid #000;
position: relative;
}
.wrap .rank-label {
position: absolute;
top: 0;
right: 0;
width: 58px;
height: 58px;
background: #FFD200;
}
.wrap .rank-label::before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 0;
height: 0;
border-width: 29px;
border-style: solid;
border-color: transparent;
border-left-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
最终的效果如下:
我们绘制这个三角形的原理其实是先绘制出一个正方形,然后利用伪元素将左下或者右上边框设为#FFFFFF覆盖住正方形的一半面积,从而绘制出相应的三角形。
利用上述原理,我们也可以很容易绘制出下面的三角形:
代码如下:
.wrap {
width: 200px;
height: 100px;
border: 1px solid #000;
position: relative;
}
.wrap .rank-label {
position: absolute;
top: 0;
right: 0;
width: 58px;
height: 58px;
background: #FFD200;
}
.wrap .rank-label::before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 0;
height: 0;
border-width: 29px;
border-style: solid;
border-color: transparent;
border-right-color: #ffffff;
border-top-color: #ffffff;
}