CSS绘制三角形原理剖析

首先,从对border的应用开始,以前一直以为边框是矩形的,其实不然,如下:

.border {
  width:50px;
  height:50px;
  border: 2px solid;
  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; 
}

当我们增大border值时:

.border {
  width:50px;
  height:50px;
  border: 20px solid;
  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
}

可以明显的看出,border的每一条边是矩形的。

现在试想一下,我们把元素的长和宽都设置为0px,边框的值不变,我们用极限的原理解释,每一边的边框将会由梯形变成三角形,来试验一下:

.border {
  width:0px;
  height:0px;
  border: 20px solid;
  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
}

那么现在我们对如何绘制三角形就有一个思路:把其他三边的边框的border-color值设为transparent,即可得到一个三角形。

下三角:

.border {
  width:0px;
  height:0px;
  border: 20px solid;
  border-color: #ADFF2F transparent transparent transparent;
}

左三角:

.border {
  width:0px;
  height:0px;
  border: 20px solid;
  border-color: transparent #BA55D3 transparent transparent;
}

上三角:

.border {
  width:0px;
  height:0px;
  border: 20px solid;
  border-color: transparent transparent #F4A460 transparent;
}

右三角:

.border {
  width:0px;
  height:0px;
  border: 20px solid;
  border-color: transparent transparent transparent #FF0000;
}

 

注意border-color属性值的顺序:

border-color:red green blue pink;
  • 上边框是红色
  • 右边框是绿色
  • 下边框是蓝色
  • 左边框是粉色

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值