使用border做三角形

网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形。
我们知道border是个边可以单独设置,当四个边相交的时候他们是什么时候改变的?

.t0{
  margin:30px;
  height:200px;
  width:200px;
  border-top:solid 100px red;
  border-left:solid 100px green;
  border-right:solid 100px orange;
  border-bottom:solid 100px blue;
}

  使用border做三角形





通过demo可以看到border的相交的地方在45deg平分
下面我们将元素的width、和height属性呗设置为0

.t1{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 100px red;
  border-left:solid 100px green;
  border-right:solid 100px orange;
  border-bottom:solid 100px blue;
}
使用border做三角形







这样我们就可以看到三角形了
下面尝试一下去掉两个边框,值保留上边和左边

.t2{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 100px red;
  border-left:solid 100px green;
}
使用border做三角形





这时候做三角形好像简单了,只要我们保留两个相邻边,把另外的一个设置为透明就可以了

.t3{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 100px red;
  border-right:solid 100px rgba(0,0,0,0);
}
使用border做三角形




这样我们就有一个直角三角形了
下面稍微修改一下

.t4{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 90px red;
  border-left:solid 200px rgba(0,0,0,0);
}
使用border做三角形




下面做等腰直角三角形也简单了,保留相邻的三个边,两个设置为透明就行了

.t5{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 200px red;
  border-left:solid 200px rgba(0,0,0,0);
  border-right:solid 200px rgba(0,0,0,0);
}
使用border做三角形


再稍微调整一下,还可以做出各种形状

.t6{
  margin:30px;
  height:0px;
  width:0px;
  border-left:solid 100px green;
  border-top:solid 100px rgba(0,0,0,0);
  border-bottom:solid 100px rgba(0,0,0,0);
}
使用border做三角形


.t7{
  margin:30px;
  height:0px;
  width:0px;
  border-left:solid 200px green;
  border-top:solid 80px rgba(0,0,0,0);
  border-bottom:solid 80px rgba(0,0,0,0);
}
使用border做三角形




.t8{
  margin:30px;
  height:0px;
  width:0px;
  border-left:solid 100px green;
  border-top:solid 200px rgba(0,0,0,0);
  border-bottom:solid 100px rgba(0,0,0,0);
}
使用border做三角形




原文链接:http://www.cnblogs.com/dolphinX/p/4068894.html



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值