通过CSS的border绘制三角形

2018-06-24 00:23:08来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向。看下面各种图形,相信可能还有很多图形,大家都没见过。

先写出公共的样式:

1 .border {
2     width: 0;
3     height: 0;
4     
5     border-color: transparent;
6     border-width: 1rem;
7     border-style: solid;
8 }

 

在上面的css基础上,添加下面的组合代码,将可以控制三角形的方向:

1 border-left-color: #000;

qq%e6%88%aa%e5%9b%be20160913160720

 

 

1 border-right-color: #000;

 

qq%e6%88%aa%e5%9b%be20160913160755

 

 

1 border-top-color: #000;

 

qq%e6%88%aa%e5%9b%be20160913160824

 

 

1 border-bottom-color: #000;

qq%e6%88%aa%e5%9b%be20160913160841

 

 

1 border-left-color: #000;
2 border-bottom-color: #000;

qq%e6%88%aa%e5%9b%be20160913160859

 

 

1 border-right-color: #000;
2 border-bottom-color: #000;

qq%e6%88%aa%e5%9b%be20160913161235

 

 

1 border-right-color: #000;
2 border-top-color: #000;

qq%e6%88%aa%e5%9b%be20160913161246

 

 

1 border-left-color: #000;
2 border-top-color: #000;

qq%e6%88%aa%e5%9b%be20160913161302

 

 

1 border-top-color: #000;
2 border-bottom-color: #000;

qq%e6%88%aa%e5%9b%be20160913161504

 

 

1 border-left-color: #000;
2 border-right-color: #000;

qq%e6%88%aa%e5%9b%be20160913161517

 

 

1 border-top-color: #000;
2 border-left-color: #000;
3 border-bottom-color: #000;

qq%e6%88%aa%e5%9b%be20160913161314

 

 

1 border-top-color: #000;
2 border-left-color: #000;
3 border-right-color: #000;

qq%e6%88%aa%e5%9b%be20160913161326

 

 

1 border-bottom-color: #000;
2 border-left-color: #000;
3 border-right-color: #000;

qq%e6%88%aa%e5%9b%be20160913161415

 

 

1 border-top-color: #000;
2 border-right-color: #000;
3 border-bottom-color: #000;

qq%e6%88%aa%e5%9b%be20160913161447

 

 

还有下面的这个效果,

1 border-left-color: #000;
2 border-right-color: #000;
3 border-left-width: 3rem;

qq%e6%88%aa%e5%9b%be20160913161537

 

不同的组合产生不同的效果,大家可以尝试各种组合带来的效果。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:css中的各种单位简述以及ios10下safari禁止缩放的问题

下一篇:CSS3的变形transform、过渡transition、动画animation学习