点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

通过CSS的border绘制三角形

来源：动视网责编：小采时间：2020-11-27 15:38:24

通过CSS的border绘制三角形

通过CSS的border绘制三角形:通过css的border 可以绘制出三角形, 不同的样式组合，有着不同的效果，可以控制它的大小，颜色，方向。看下面各种图形，相信可能还有很多图形，大家都没见过。先写出公共的样式： 1 .border { 2 width: 0; 3 height: 0; 4 5 borde

推荐度：

点击下载本文 文档为doc格式

导读通过CSS的border绘制三角形:通过css的border 可以绘制出三角形, 不同的样式组合，有着不同的效果，可以控制它的大小，颜色，方向。看下面各种图形，相信可能还有很多图形，大家都没见过。先写出公共的样式： 1 .border { 2 width: 0; 3 height: 0; 4 5 borde

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

1 border-right-color: #000;

1 border-top-color: #000;

1 border-bottom-color: #000;

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

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

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

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

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

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

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

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

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

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

还有下面的这个效果，

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

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

通过CSS的border绘制三角形

推荐度：

点击下载本文 文档为doc格式

标签：三角形通过绘制

热门焦点

通过CSS的border绘制三角形

通过CSS的border绘制三角形

通过CSS的border绘制三角形

最新推荐

猜你喜欢

热门推荐