摘要:说明使用可以绘制出许多形状,比如三角形梯形圆形椭圆,等并不只是可以绘制矩形。前面后面左面右面下面查看示例总结文中实现的各种形状,也许你觉得实现的很复杂,其实你也可以使用这一个属性,绘制各种形状。
说明
使用 CSS 可以绘制出许多形状,比如三角形、梯形、圆形、椭圆,等 并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。
为了容易理解,文章分为基本形状 和 组合形状来说,基本形状是比较容易实现的,而利用这些基本形状进行组合,就可以实现稍微复杂点的组合形状了。
.triangle { width: 0; height: 0; border: 50px solid blue; /* 通过改变边框颜色,可以改变三角形的方向 */ border-color: blue transparent transparent transparent; }
查看示例
梯形.trapzoid { width: 40px; height: 100px; border: 50px solid blue; border-color: transparent transparent blue transparent; }
查看示例
圆形.circle{ width:100px; height:100px; border-radius:50%; background:blue; }
查看示例
球体.sphere { height: 200px; width: 200px; border-radius: 50%; background: radial-gradient(circle at 70px 70px, #5cabff, #000); }
查看示例
椭圆.ellipse { width: 200px; height: 100px; border-radius: 50%; background: blue; }
查看示例
半圆.semicircle { width: 50px; height: 100px; /* "/"前四个值表示圆角的水平半径,后四个值表示圆角的垂直半径*/ border-radius: 200% 0 0 200% / 100% 0 0 100%; /* 效果和用%一样 */ /* border-radius: 50px 0 0 50px; */ background: blue; }
查看示例
菱形.rhombus { width: 200px; height: 200px; transform: rotateZ(45deg) skew(30deg, 30deg); background: blue; }
查看示例
组合形状 心形心形是由两个圆形和一个矩形进行组合得到的。
.heart { width: 100px; height: 100px; transform: rotateZ(45deg); background: red; } .heart::after, .heart::before { content: ""; width: 100%; height: 100%; border-radius: 50%; display: block; background: red; position: absolute; top: -50%; left: 0; } .heart::before { top: 0; left: -50%; }
查看示例
扇形扇形是由一个圆形和一个矩形进行组合得到的,用矩形遮住圆形的一部分就形成了扇形。
.sector { width: 142px; height: 142px; background: #fff; border-radius: 50%; background-image: linear-gradient(to right, transparent 50%, #655 0); } .sector::before { content: ""; display: block; margin-left: 50%; height: 100%; width: 100%; background-color: inherit; transform-origin: left; /*调整角度,改变扇形大小*/ transform: rotate(230deg); }
查看示例
五边形五边形是由一个三角形和一个梯形进行组合得到的。
.pentagonal { width: 100px; position: relative; border-width: 105px 50px 0; border-style: solid; border-color: blue transparent; } .pentagonal:before { content: ""; position: absolute; width: 0; height: 0; top: -185px; left: -50px; border-width: 0px 100px 80px; border-style: solid; border-color: transparent transparent blue; }
查看示例
六边形六边形是由两个三角形和一个矩形进行组合得到的。
.hexagon { width: 200px; height: 100px; background-color: blue; position: relative; } .hexagon:before { content: ""; position: absolute; top: -60px; left: 0; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 60px solid blue; } .hexagon:after { content: ""; left: 0; width: 0; height: 0; bottom: -60px; position: absolute; border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 60px solid blue; }
查看示例
长方体长方体是由六个矩形进行组合得到的。
.cuboid { width: 200px; height: 200px; transform-style: preserve-3d; transform: rotateX(-30deg) rotateY(-80deg); } .cuboid div { position: absolute; width: 200px; height: 200px; opacity: 0.8; transition: .4s; } .cuboid .front { transform: rotateY(0deg) translateZ(100px); background: #a3daff; } .cuboid .back { transform: translateZ(-100px) rotateY(180deg); background: #a3daff; } .cuboid .left { transform: rotateY(-90deg) translateZ(100px); background: #1ec0ff; } .cuboid .right { transform: rotateY(90deg) translateZ(100px); background: #1ec0ff; } .cuboid .top { transform: rotateX(90deg) translateZ(100px); background: #0080ff; } .cuboid .bottom { transform: rotateX(-90deg) translateZ(100px); background: #0080ff; }
查看示例
圆柱体圆柱体是由一个椭圆和一个圆角矩形进行组合得到的。
.cylinder { position: relative; transform: rotateX(70deg); } .ellipse { width: 100px; height: 100px; background: deepskyblue; border-radius: 50px; } .rectangle { width: 100px; height: 400px; position: absolute; opacity: 0.6; background: deepskyblue; top: 0; left: 0; border-radius: 50px; z-index: -1; }
查看示例
如果使用了渐变色,看上去会更像一些。
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
查看示例
棱锥棱锥是由四个三角形和一个矩形进行组合得到的。
.pyramid { width: 200px; height: 200px; transform-style: preserve-3d; transform: rotateX(-30deg) rotateY(-80deg); } .pyramid div { position: absolute; top: -100px; width: 0px; height: 0px; border: 100px solid transparent; border-bottom-width: 200px; opacity: 0.8; } .pyramid .front { transform: translateZ(100px) rotateX(30deg); border-bottom-color: #a3daff; transform-origin: 0 100%; } .pyramid .back { transform: translateZ(-100px) rotateX(-30deg); border-bottom-color: #1ec0ff; transform-origin: 0 100%; } .pyramid .left { transform: translateX(-100px) rotateZ(30deg) rotateY(90deg); border-bottom-color: #0080ff; transform-origin: 50% 100%; } .pyramid .right { transform: translateX(100px) rotateZ(-30deg) rotateY(90deg); border-bottom-color: #03a6ff; transform-origin: 50% 100%; } .pyramid .bottom { transform: translateX(-100px) rotateZ(90deg) rotateY(90deg); background: cyan; width: 200px; height: 200px; border: 0; top: 0; transform-origin: 50% 100%; }
查看示例
总结文中实现的各种形状,也许你觉得实现的很复杂,其实你也可以使用 clip-path 这一个属性,绘制各种形状。
CSS 能绘制的东西,不仅仅只有这些,还有很多很多,文中都没有说出来,而即便是文中已经实现的形状也不只有一种实现方式,有兴趣的小伙伴可以继续去探索。
这里有一个使用各种形状进行组合,形成魔法阵的例子。
我们还可以给魔法阵中的形状增加动画,使魔法阵看上去更有趣。
查看示例
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/116037.html
摘要:说明使用可以绘制出许多形状,比如三角形梯形圆形椭圆,等并不只是可以绘制矩形。前面后面左面右面下面查看示例总结文中实现的各种形状,也许你觉得实现的很复杂,其实你也可以使用这一个属性,绘制各种形状。 说明 使用 CSS 可以绘制出许多形状,比如三角形、梯形、圆形、椭圆,等 并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。为了容易理解,文章分为基本形状 和 组合形状来说,基本形状是比较...
摘要:我们在编写前端代码时,经常会遇到各种各样的形状图形如边框对话框,三角形,平行四边形圆角边框圆形四叶草花瓣等,除了用背景图片雪碧图或精灵图定位引用和插入图片的方法,我们还可以用边框圆角渐变和定位的方法结合使用,绘制各种各样的形状图形。 我们在编写前端代码时,经常会遇到各种各样的形状图形(如:边框对话框,三角形,平行四边形、圆角边框、圆形、四叶草、花瓣等),除了用背景图片(css雪碧图或c...
摘要:我们在编写前端代码时,经常会遇到各种各样的形状图形如边框对话框,三角形,平行四边形圆角边框圆形四叶草花瓣等,除了用背景图片雪碧图或精灵图定位引用和插入图片的方法,我们还可以用边框圆角渐变和定位的方法结合使用,绘制各种各样的形状图形。 我们在编写前端代码时,经常会遇到各种各样的形状图形(如:边框对话框,三角形,平行四边形、圆角边框、圆形、四叶草、花瓣等),除了用背景图片(css雪碧图或c...
摘要:虽然我们现在大都使用字体图标或者图片,似乎使用来做图标意义不是很大,但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。 虽然我们现在大都使用字体图标或者svg图片,似乎使用 CSS 来做图标意义不是很大,但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。 一、实心圆 showImg(https://segmentfault.com/img/bVbsV6v?w=171&h...
阅读 1039·2021-09-22 15:32
阅读 1675·2019-08-30 15:53
阅读 3172·2019-08-30 15:53
阅读 1317·2019-08-30 15:43
阅读 385·2019-08-28 18:28
阅读 2524·2019-08-26 18:18
阅读 599·2019-08-26 13:58
阅读 2473·2019-08-26 12:10