应用CSS的border特性绘图各种各样几何图形样子的

2021-03-17 06:05 jianzhan

序言

border 边框特性能够说是大家在网页页面合理布局中最常见但是的1个特性之1。 border 它不只是边框,它也有许多十分有效的“黑魔法”哈,让大家1起来学习培训1下。

border绘图几何图形样子的基本原理

大家先看来1个简易的小事例:

在网页页面上写1个 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个不一样色调不一样方位的3角形了,再次往下看,1起来见证下 border 的黑魔法。

border能绘图甚么几何图形样子?

  • 3角形
  • 梯形
  • 平行4边形
  • 5边形
  • 6边形
  • 8边形
  • 5角星
  • 6角星
  • ...

3角形
 

向上的3角形

要获得向上的3角形,是否要是设定 上边框 的宽度为 0 ,设定 上边框左侧框右侧框 的边框色调设为 transparent 全透明,保存 下边框 的边框色调便可以了,看编码:

<div class="triangle triangle-up"></div>
// 公共性
.triangle {
    width: 0;
    height: 0;
}

// 向上的3角形
.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;  // 边框色调
}

下面编码都会用简写的方式。

向右的3角形

同理,设定 右侧框 的宽度为 0 ,设定 上边框右侧框下边框 的边框色调为全透明,保存 左侧框 的边框色调便可以了

<div class="triangle triangle-right"></div>
.triangle-right {
    border-width: 50px 0 50px 50px;
    border-style: solid;
    border-color: transparent transparent transparent green;
}

向下的3角形

同理,设定 下边框 的宽度为 0 ,设定 左侧框右侧框下边框 的边框色调为全透明,保存 上边框 的边框色调便可以了

<div class="triangle triangle-bottom"></div>
.triangle-bottom {
    border-width: 50px 50px 0;
    border-style: solid;
    border-color: red transparent transparent;
}

向左的3角形

同理,设定 左侧框 的宽度为 0 ,设定 上边框下边框左侧框 的边框色调为全透明,保存 右侧框 的边框色调便可以了

<div class="triangle triangle-left"></div>
.triangle-left {
    border-width: 50px 50px 50px 0;
    border-style: solid;
    border-color: transparent yellow transparent transparent;
}

接下来再看来下怎样完成下面的3角形呢?

实际上不难发现,向左上的3角形恰好是向下的3角形的右半一部分,因此要获得这个图型,是否要是把向下的3角形左半一部分的边框设为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;
}

同理,可获得别的3个不一样方位3角形,编码以下:

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

梯形

依靠上面的完成3角形的方式,大家能够很非常容易的完成梯形,例如下面这个:

向上的梯形:

实际上要是把上面 向上的3角形 的编码再加宽度就可以完成了

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

平行4边形

要是1个 向上的3角形向下的3角形 融合起来就可以完成,必须相互配合1个伪元素。

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

5边形

梯形再加1个3角形,很非常容易就可以组成成1个5边形,也必须相互配合1个伪元向来完成。

.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: ⑸0px;
    width: 0;
    height: 0;
    border-width: 75px 75px 0;
    border-style: solid;
    border-color: red transparent transparent;
    content: "";
}

6边形

假如两个相反向且底边一样尺寸的梯形,叠加在1起,是否就可以获得1个6边形呢?一样必须相互配合1个伪元向来完成。

.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: ⑸0px;
    width: 50px;
    border-top: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    content: "";
}

实战演练运用

闲聊气泡

是否用到了 向下的3角形 融合1个圆角矩形框来完成。

往下拉菜单

大家开启淘宝天猫,看来下它顶部的往下拉菜单,是否也用到 向上的3角形向下的3角 形。

大家看来下它的完成编码:

再看来1个,大家开启京东秒杀

是否就用到了大家上面剖析的 平行4边形 来完成的,大家一样看来下它的完成编码:

便是根据1个矩形框,随后相互配合两个伪元素的3角形融合起来完成的。

实际应用情景也有许多,大伙儿能够依据自身平常新项目开发设计中的具体要求来充分发挥想像。

能用CSS款式搞定的实际效果就不必应用照片哈,不但有益于后期的维护保养,也能降低网页页面的恳求,提升网页页面的载入速率。

总结

实际上根据各种各样组成,还能够完成许多不一样的样子,这里就不11例举了。例如还能够完成 8边形5角星6角星8角星102角星 这些, border 便是这么强劲。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。