星空网 > 软件开发 > 网页设计

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

通过CSS的border绘制三角形

 

 

1 border-right-color: #000;

 

通过CSS的border绘制三角形

 

 

1 border-top-color: #000;

 

通过CSS的border绘制三角形

 

 

1 border-bottom-color: #000;

通过CSS的border绘制三角形

 

 

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

通过CSS的border绘制三角形

 

 

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

通过CSS的border绘制三角形

 

 

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

通过CSS的border绘制三角形

 

 

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

通过CSS的border绘制三角形

 

 

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

通过CSS的border绘制三角形

 

 

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

通过CSS的border绘制三角形

 

 

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

通过CSS的border绘制三角形

 

 

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

通过CSS的border绘制三角形

 

 

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

通过CSS的border绘制三角形

 

 

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

通过CSS的border绘制三角形

 

 

还有下面的这个效果,

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

通过CSS的border绘制三角形

 

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




原标题:通过CSS的border绘制三角形

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流