通过CSS的border绘制三角形

通过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;

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

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

通过CSS的border绘制三角形 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

查看更多

相关文章