css实现三角形
2017-02-15 20:49
218 查看
css可以实现各种各样的三角形,减少了切图加载图片,以下是各种三角形的实现方法。
1.首先设置一个盒子的三边为不同的颜色,看下边框是怎么显示的。
显示效果如图所示:
可以看出每个边都是一个梯形
2.设置盒子的宽和高为0
当盒子的宽和高都是0时,边框显示为三角形。由此可以看出,如何实现各种三角形。如果想实现倒三角,则其他的边为transparent,只设置最上面的边有颜色,则可以实现倒三角,同理可以实现各种三角形。
3.各种三角形的实现
(1)倒三角的实现
(2)向上三角的实现(只需要保留下面的边)
(3)向右三角的实现(保留左面的边)
(4)向左三角的实现(保留右面的边)
(5)保留上边和右边组成三角形
(6)
由于没有上边,所以左右的三角形都变成一半,只显示了下边部分。若只设置左右不设置上下,则左右的边无法显示。
1.首先设置一个盒子的三边为不同的颜色,看下边框是怎么显示的。
<html> <head> <style type="text/css"> #test{ width:20px; height:20px; border-width:15px; border-style:solid; border-color:#e66161 #f3bb5b #94e24f #85bfda; } </style> </head> <body> <div id="test"> </div> </body> </html>
显示效果如图所示:
可以看出每个边都是一个梯形
2.设置盒子的宽和高为0
#test{ width:0px; height:0px; border-width:20px; border-style:solid; border-color:#e66161 #f3bb5b #94e24f #85bfda; }
当盒子的宽和高都是0时,边框显示为三角形。由此可以看出,如何实现各种三角形。如果想实现倒三角,则其他的边为transparent,只设置最上面的边有颜色,则可以实现倒三角,同理可以实现各种三角形。
3.各种三角形的实现
(1)倒三角的实现
#test{ width:0px; height:0px; border-width:20px; border-style:solid; border-color:green transparent transparent transparent; }
(2)向上三角的实现(只需要保留下面的边)
#test{ width:0px; height:0px; border-width:20px; border-style:solid; border-color:transparent transparent green transparent; }
(3)向右三角的实现(保留左面的边)
#test{ width:0px; height:0px; border-width:20px; border-style:solid; border-color:transparent transparent transparent green; }
(4)向左三角的实现(保留右面的边)
#test{ width:0px; height:0px; border-width:20px; border-style:solid; border-color:transparent green transparent transparent ; }
(5)保留上边和右边组成三角形
#test{ width:0px; height:0px; border-width:20px; border-style:solid; border-color:green green transparent transparent ; }
(6)
#test{ width:0px; height:0px; border-left: 150px solid green; border-right: 150px solid green; border-bottom: 50px solid gray; }
由于没有上边,所以左右的三角形都变成一半,只显示了下边部分。若只设置左右不设置上下,则左右的边无法显示。
相关文章推荐
- CSS技巧之圆角背景与三角形实现方法
- CSS实现三角形
- 纯CSS实现小圆点和三角形图案
- 纯CSS实现箭头、气泡让提示功能具有三角形图标
- CSS实现DIV三角形
- css实现无图片三角形垂直导航条
- css实现三角形及应用示例
- 纯 CSS 实现三角形尖角箭头的实例
- 纯 CSS 实现三角形尖角箭头的实例
- CSS和字符串实现三角形
- 纯CSS实现“三角形箭头”布局的代码
- css实现三角形 兼容主流浏览器
- css实现三角形
- 纯CSS 实现三角形图标
- css实现三角形 圆形
- css实现三角形
- css绘画三角形,实现一些图形
- 三种纯css方式实现三角形
- 用css实现三角形
- 三角形变形记之纯css实现的分布导航条效果