cssborder三角形怎么画(使用CSS的border属性绘制各种几何形状的方法)
cssborder三角形怎么画
使用CSS的border属性绘制各种几何形状的方法前言
border
边框属性可以说是我们在网页布局中最常用不过的一个属性之一。 border
它不只是边框,它还有很多非常有用的“黑魔法”哈,让我们一起来学习一下。
border绘制几何形状的原理
我们先来看一个简单的小例子:
在页面上写一个 li
<li class="border-test"><li>
给这个 li
加上以下样式
.border-test { width: 200px; height: 200px; background-color: #000; border-top: 50px solid red; border-right: 50px solid yellow; border-bottom: 50px solid blue; border-left: 50px solid green; }
在浏览器预览可以看到下面的效果
接下来,我们把这个 li
的宽度跟高度都设为 0
,看看是什么效果
是不是剩下4个不同颜色不同方向的三角形了,继续往下看,一起来见证下 border
的黑魔法。
border能绘制什么几何形状?
- 三角形
- 梯形
- 平行四边形
- 五边形
- 六边形
- 八边形
- 五角星
- 六角星
- ...
三角形
向上的三角形
要得到向上的三角形,是不是只要设置 上边框
的宽度为 0
,设置 上边框
、 左边框
、 右边框
的边框颜色设为 transparent
透明,保留 下边框
的边框颜色就可以了,看代码:
<li class="triangle triangle-up"></li>
// 公共 .triangle { width: 0; height: 0; } // 向上的三角形 .triangle-up { border-top: 0 solid transparent; // 这句这可以省略 border-right: 50px solid transparent; border-bottom: 50px solid blue; border-left: 50px solid transparent; }
还可以简写成,遵循 上右下左
顺序来设置
.triangle-up { border-width: 0 50px 50px; // 边框大小 border-style: solid; // 边框样式 border-color: transparent transparent blue; // 边框颜色 }
下面代码都会用简写的形式。
向右的三角形
同理,设置 右边框
的宽度为 0
,设置 上边框
、 右边框
、 下边框
的边框颜色为透明,保留 左边框
的边框颜色就可以了
<li class="triangle triangle-right"></li>
.triangle-right { border-width: 50px 0 50px 50px; border-style: solid; border-color: transparent transparent transparent green; }
向下的三角形
同理,设置 下边框
的宽度为 0
,设置 左边框
、 右边框
、 下边框
的边框颜色为透明,保留 上边框
的边框颜色就可以了
<li class="triangle triangle-bottom"></li>
.triangle-bottom { border-width: 50px 50px 0; border-style: solid; border-color: red transparent transparent; }
向左的三角形
同理,设置 左边框
的宽度为 0
,设置 上边框
、 下边框
、 左边框
的边框颜色为透明,保留 右边框
的边框颜色就可以了
<li class="triangle triangle-left"></li>
.triangle-left { border-width: 50px 50px 50px 0; border-style: solid; border-color: transparent yellow transparent transparent; }
接下来再来看下如何实现下面的三角形呢?
其实不难发现,向左上的三角形刚好是向下的三角形的右半部分,所以要得到这个图形,是不是只要把向下的三角形左半部分的边框设为0就可以了,看代码:
<li class="triangle triangle-top-left"></li>
.triangle-top-left { border-width: 50px 50px 0 0; border-style: solid; border-color: red transparent transparent; }
同理,可得到其他三个不同方向三角形,代码如下:
.triangle-top-right { border-width: 50px 0 0 50px; border-style: solid; border-color: red transparent transparent; } .triangle-bottom-left { border-width: 0 50px 50px 0; border-style: solid; border-color: transparent transparent blue; } .triangle-bottom-right { border-width: 0 0 50px 50px; border-style: solid; border-color: transparent transparent blue; }
梯形
借助上面的实现三角形的方法,我们可以很容易的实现梯形,比如下面这个:
向上的梯形:
其实只要把上面 向上的三角形
的代码加上宽度就能实现了
.trapezoid { width: 60px; border-bottom: 60px solid red; border-left: 60px solid transparent; border-right: 60px solid transparent; }
同理,可以得到 向下的梯形
.trapezoid-bottom { width: 50px; border-top: 50px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; }
如果要得到向左和向右的梯形,需要把 width
设为 0
,然后设置相应的高度值。
.trapezoid-left { width: 0; height: 50px; border-width: 50px 50px 50px 0; border-style: solid; border-color: transparent red transparent transparent; } .trapezoid-right { width: 0; height: 50px; border-width: 50px 0 50px 50px; border-style: solid; border-color: transparent transparent transparent red; }
平行四边形
只要一个 向上的三角形
跟 向下的三角形
结合起来就能实现,需要配合一个伪元素。
.parallelogram { position: relative; width: 0; height: 0; border-width: 0 50px 50px; border-style: solid; border-color: transparent transparent red; } .parallelogram:after { position: absolute; top: 0; left: 0; border-width: 50px 50px 0; border-style: solid; border-color: red transparent transparent; content: ""; }
五边形
梯形加上一个三角形,很容易就能组合成一个五边形,也需要配合一个伪元素来实现。
.pentagon { position: relative; width: 50px; border-bottom: 50px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; } .pentagon:after { position: absolute; top: 50px; left: -50px; width: 0; height: 0; border-width: 75px 75px 0; border-style: solid; border-color: red transparent transparent; content: ""; }
六边形
如果两个相反方向且底边同样大小的梯形,叠加在一起,是不是就能得到一个六边形呢?同样需要配合一个伪元素来实现。
.hexagon { position: relative; width: 50px; border-bottom: 50px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; } .hexagon:after { position: absolute; top: 50px; left: -50px; width: 50px; border-top: 50px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; content: ""; }
实战应用
聊天气泡
是不是用到了 向下的三角形
结合一个圆角矩形来实现。
下拉菜单
我们打开淘宝天猫,来看下它顶部的下拉菜单,是不是也用到 向上的三角形
和 向下的三角
形。
我们来看下它的实现代码:
再来看一个,我们打开京东秒杀
是不是就用到了我们上面分析的 平行四边形
来实现的,我们同样来看下它的实现代码:
就是通过一个矩形,然后配合两个伪元素的三角形结合起来实现的。
具体使用场景还有很多,大家可以根据自己平时项目开发中的实际需求来发挥想象。
能用CSS样式搞定的效果就不要使用图片哈,不仅有利于后期的维护,也能减少网页的请求,提高页面的加载速度。
总结
其实通过各种组合,还可以实现很多不同的形状,这里就不一一列举了。比如还可以实现 八边形
、 五角星
、 六角星
、 八角星
、 十二角星
等等, border
就是这么强大。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
- css3渐变背景图片(css3实现背景图片半透明内容不透明的方法示例)
- css3动画效果怎么调(CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集)
- CSS优雅降级和渐进增强
- css box样式(解析CSS的box model盒模型及其内的子元素布局控制)
- css导航栏字怎么分开设置(纯CSS实现导航栏Tab切换效果)
- css文本怎么控制边距(css中text-overflow属性与文本截断详解)
- css3 box-sizing
- css背景的属性有哪些(简述CSS中的背景属性background)
- css渐变有几种(CSS 还能这样玩?奇思妙想渐变的艺术)
- filter的用法css(CSS filter 有什么神奇用途)
- html+css网页布局实例(网页布局入门教程 如何用CSS进行网页布局)
- css安全模式(仅针对IE8有效的CSS Hack猎奇写法)
- css边框和边界教程(css 中多种边框的实现小窍门)
- css的五种基本选择器(CSS兼容问题之HACK技术)
- css如何让图片居中
- css3定义自定义字体(CSS3字体效果的设置方法小结)
- 美国数十万加仑牛奶倒入下水道,贫民区食不果腹,历史再次重演(美国数十万加仑牛奶倒入下水道)
- 美国倒掉数十万加仑牛奶 上热搜第一,这一幕似曾相识(美国倒掉数十万加仑牛奶)
- 深度 倒牛奶 这一幕为何又在美国上演(深度倒牛奶)
- 美国数十万加仑牛奶倒下水道怎么回事 原因曝光令人心痛(美国数十万加仑牛奶倒下水道怎么回事)
- 探索中国神秘文字(探索中国神秘文字)
- 重温《蜗居》 宋思明选中海藻为红颜知己,纯属巧合,与爱无关(宋思明选中海藻为红颜知己)
热门推荐
- 异步调用中HttpContext.Current为null解决方法
- mysql存储过程limit参数(MySQL存储过程in、out和inout参数示例和总结)
- python如何使用yield(YII2.0框架行为Behavior深入详解)
- php wamp 环境搭建(wamp服务器访问php非常缓慢的解决过程)
- idea向数据库中插入中文报错(Idea连接MySQL数据库出现中文乱码的问题)
- sqlserver怎么查看数据库版本(Sql Server数据库各版本功能对比)
- html5字体倾斜代码(html5响应式开发自动计算fontSize的方法)
- sqlservercount函数的用法(SQL Server中row_number函数的常见用法示例详解)
- dedecms怎么调用标签(DEDECMS 留言薄模块的使用方法)
- sqlserver查看数据表更新时间(SQL Server实现显示每个类别最新更新数据的方法)