资讯专栏INFORMATION COLUMN

css 实现各种基本图形

Elle / 2516人阅读

摘要:三角形三个角分别是,此时画五角星等价于画三个三角形。所以理论上,通过控制一个三条的长度,进而实现不同大小的三角形是可行。实践了一番,由于很难得到一个整数值,所以通过这种方法画正五角形几乎是无法实现的。

三角形

写 css 的时候,用惯了背景图,忽略了 css 本身其实可以实现很多简单的基本图形,比如三角形:

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 transparent transparent;
    width: 0px;
    height: 0px;
}

效果图:

百思不得qijie,为啥宽高为 0,却能显示一个三角形?平常的边框,看上去都是四条直线,其实不然,修改三角型代码,展示其两条边为例:

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 blue transparent transparent;
    width: 50px;
    height: 50px;
}

效果图:

恍然大悟,原来边框其实是等腰梯形

那么还可以做其他哪些图形(以下代码摘自 the shapes of css)?

圆形

#circle {
    width: 200px;
    height: 200px;
    background: red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

主要利用了 border-radius 属性,将矩形圆角化。其值可以使用长度(px),也可以使用百分比。百分比会转化成长度,比如此例中,50% 表示 水平圆角半径=宽度*50%垂直圆角半径=高度*50%所以直接写 100px 也是等价的。

平行四边形

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(160deg);
       -moz-transform: skew(160deg);
         -o-transform: skew(160deg);
    background: red;
}

利用 transform 倾斜特性如下:

向x轴方向(水平向右)倾斜 160°:可以想象为矩形的右侧边沿着逆时针方向旋转 160°(当旋转 90° 时,四条边重合,图形会消失;当旋转超过 90° 时,类似对称;当旋转超过 180° 时,便类似转圈了)

向 y 轴方向(水平向下)倾斜,可以想象为矩形底边沿着顺时针方向旋转。

五角形

是时候提高下难度了,我们来看下怎么画五角形⭐️?五角星可以看成是由三个等腰三角形组成。

三角形三个角分别是 36°、36°、108°,此时画五角星等价于画三个三角形。文章开头提到的方法只能画角度固定的等腰三角形。仔细研究下 border,其实角度是可控的,如下所示:

  width: 10px;
  height:10px;
  border-right:  100px solid green;
  border-bottom: 70px  solid red;
  border-top: 20px  solid blue;
  border-left:   50px solid black;

通过给边框设置不同的长度,会影响到边框的形状:以上图红色三角形为例它的底边长为 border-left + border-right;高中学习的余弦定理得知:通过已知三角形的角度和任意一边的长度,可以确定三角形的形状。所以理论上,通过控制一个 div 三条 border 的长度,进而实现不同大小的三角形是可行。实践了一番,由于很难得到一个整数值,所以通过这种方法画正五角形几乎是无法实现的。

原文的代码如下(很惊讶原作者是如何算出来这些边框宽度的):

#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: "";
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);

}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: "";
}
其他有趣的图形

钻石

通过一个梯形和一个三角形组合而成

吃豆人

一个圆形,隐藏右侧边

对话框

一个三角形,加一个圆角矩形

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115504.html

相关文章

  • 前端图像处理指南

    摘要:本文会介绍位图处理,矢量图和图像处理,重点是,并且最后会附上一个小应用。以上列举部分,更多备胎在此矢量图处理讲完位图再说矢量图。矢量图在绘制图标商业动画元素上应用非常广范。 计算机图像处理是一门很成熟的技术,任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制,处理起来会有诸多不便,这里所说的前端图像处理,是真的指不借助任何后端服务纯前端实现的图像...

    CatalpaFlat 评论0 收藏0
  • 前端图像处理指南

    摘要:本文会介绍位图处理,矢量图和图像处理,重点是,并且最后会附上一个小应用。以上列举部分,更多备胎在此矢量图处理讲完位图再说矢量图。矢量图在绘制图标商业动画元素上应用非常广范。 计算机图像处理是一门很成熟的技术,任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制,处理起来会有诸多不便,这里所说的前端图像处理,是真的指不借助任何后端服务纯前端实现的图像...

    Anshiii 评论0 收藏0
  • CSS图形绘制总结

    摘要:由张鑫旭大佬的几篇文章常见的图形绘制合集,小纯实现打字动画效果,分享三个纯实现个英文字母的案例,发现了,一些特殊用法,由此想到自己做个总结。 由张鑫旭大佬的几篇文章常见的CSS图形绘制合集,小tips: 纯CSS实现打字动画效果,分享三个纯CSS实现26个英文字母的案例,发现了border,border-radius, box-shadow一些特殊用法,由此想到自己做个总结。 bord...

    SQC 评论0 收藏0
  • SVG 扬帆起航

    摘要:基本的文档由根元素和基本形状元素构成作为的一种方言,必须正确的绑定命名空间在属性中绑定。另外,命令不用区分大小写三次贝塞尔曲线或分别是起点终点控制点。不过,可以实现其功能与效果,因此,此属性已经被废弃。可谓因为兄弟相争而年少陨落的天王。 原文链接:http://hangyangws.win/2017/04...本文不能让你成为 SVG 大神,但是能让你知道、了解他「揭开神秘面纱」 基础...

    tanglijun 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<