实现一个简单的三角形
使用CSS盒模型中的border(边框)即可实现
效果图:三角形
实现原理:首先来看在为元素添加border时,border的样子
<div></div>
div {
width:50px; height:50px;
border: 2px solid orange;
}
效果图:border一般的用法
这是我们平常使用border最普遍的情况——往往只给border一个较小的宽度(通常为1-2px);然而这样的日常用法就会容易让大家对border的形成方式产生误解,即认为元素的border是由四个矩形边框拼接而成。
然而事实并不是这样。实际上,元素的border是由三角形组合而成,为了说明这个问题,我们可以增大border的宽度,并为各border边设置不同的颜色:
<div></div>
div {
width:50px; height:50px;
border: 40px solid;
border-color: orange blue red green;
}
效果图:border的形成方式
既然如此,那么更进一步,把元素的内容尺寸设置为0会发生什么情况呢?
div {
width: 0;height: 0;
border: 40px solid;
border-color: orange blue red green;
}
效果图:元素内容尺寸为0
我们将惊奇地发现,此时元素由上下左右4个三角形“拼接”而成;那么,为了实现最终的效果,即保留最下方的三角形,还应该怎么做?很简单,我们只需要把其它border边的颜色设置为白色或透明色:
div {
width: 0;height: 0;
border: 40px solid;
border-color: transparent transparent red;
}
效果图:最终效果
Duang~ 最终的简单三角形就绘制出来了。同理,如果想要得到其它边上的三角形,只需要将剩余的border边颜色设置为白色或透明色即可。
不过,被“隐藏”的上border仍然占据着空间,要想使得绘制出的三角形尺寸最小化,还需要将上border的宽度设置为0(其它情况同理):
div {
width: 0;height: 0;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent red;
}
实现带边框的三角形
绘制其他三角形
00
角标
<view class="selectShop">
<view class="selectShop-default"></view>
</view>
.selectShop {}
.selectShop-default {
@include width-height(rpx(0), rpx(0));
@include absolute-right-top(rpx(0), rpx(0));
border-top: 30rpx*$hd solid $uni-border-color-main;
border-left: 30rpx*$hd solid transparent;
}
转载请注明:https://www.jianshu.com/p/9a463d50e441
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。