设为首页 - 加入收藏 ASP站长网(Aspzz.Cn)- 科技、建站、经验、云计算、5G、大数据,站长网!
热搜: 创业者 数据 手机
当前位置: 首页 > 服务器 > 系统 > 正文

使用CSS的border属性绘制各种几何形状的方法

发布时间:2020-03-28 20:50 所属栏目:52 来源:站长网
导读:副标题#e# border 边框属性可以说是我们在网页布局中最常用不过的一个属性之一。 border 它不只是边框,它还有很多非常有用的黑魔法哈,让我们一起来学习一下。 border绘制几何形状的原理 我们先来看一个简单的小例子: 在页面上写一个 div div class=borde

border 边框属性可以说是我们在网页布局中最常用不过的一个属性之一。 border 它不只是边框,它还有很多非常有用的“黑魔法”哈,让我们一起来学习一下。

border绘制几何形状的原理

我们先来看一个简单的小例子:

在页面上写一个 div

<div class="border-test"><div>

给这个 div 加上以下样式

.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; }

在浏览器预览可以看到下面的效果

接下来,我们把这个 div 的宽度跟高度都设为 0 ,看看是什么效果

是不是剩下4个不同颜色不同方向的三角形了,继续往下看,一起来见证下 border 的黑魔法。

border能绘制什么几何形状?

三角形

梯形

平行四边形

五边形

六边形

八边形

五角星

六角星

...

三角形
 

向上的三角形

要得到向上的三角形,是不是只要设置 上边框 的宽度为 0 ,设置 上边框 、 左边框 、 右边框 的边框颜色设为 transparent 透明,保留 下边框 的边框颜色就可以了,看代码:

<div class="triangle triangle-up"></div>

// 公共 .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 ,设置 上边框 、 右边框 、 下边框 的边框颜色为透明,保留 左边框 的边框颜色就可以了

<div class="triangle triangle-right"></div>

.triangle-right { border-width: 50px 0 50px 50px; border-style: solid; border-color: transparent transparent transparent green; }

向下的三角形

同理,设置 下边框 的宽度为 0 ,设置 左边框 、 右边框 、 下边框 的边框颜色为透明,保留 上边框 的边框颜色就可以了

<div class="triangle triangle-bottom"></div>

.triangle-bottom { border-width: 50px 50px 0; border-style: solid; border-color: red transparent transparent; }

向左的三角形

同理,设置 左边框 的宽度为 0 ,设置 上边框 、 下边框 、 左边框 的边框颜色为透明,保留 右边框 的边框颜色就可以了

<div class="triangle triangle-left"></div>

.triangle-left { border-width: 50px 50px 50px 0; border-style: solid; border-color: transparent yellow transparent transparent; }

接下来再来看下如何实现下面的三角形呢?

其实不难发现,向左上的三角形刚好是向下的三角形的右半部分,所以要得到这个图形,是不是只要把向下的三角形左半部分的边框设为0就可以了,看代码:

<div class="triangle triangle-top-left"></div>

.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 ,然后设置相应的高度值。

(编辑:ASP站长网)

网友评论
推荐文章
    热点阅读