一、实现圆形
咱们在做网页时，常常要把图形弄成圆形的。其实用CSS3里的 border-radius 就能弄好。步骤很简单，先让图形的宽高相同，加上底色，再把 border-radius设成50%。这样一来，原本是方形的图形就变圆了，超级简单！
用这个方法，不靠图片或者别的外援，仅仅几句CSS代码就能做出展示效果超好的圆形元素！这样只用纯CSS做出来的东西，不仅省去了图片这些额外东西，还让网页的加载速度快到飞起，简直就是用户体验的大升级。
二、实现三角形
除了圆圈外，有时候也得展现三角形。不用担心，用CSS3的border属性就能搞定！只需要把元素四周都设成透明色，然后把左、右和底边设成特定的长度和颜色就行了。比如，我们把宽度和高度设成零，再给border-left、border-right和border-bottom分别赋予合适的大小和颜色，立刻就能画出一个简易的等腰三角形！
展示三角形的话，CSS也是个不错的选择！它又轻又灵它不需要其它图片啥的，就是简单地写下几个代码就搞定了那个你想要在网页上呈现的三角形样子！
三、实现矩形
矩形是最基础的几何形状，在做网页时也常常用到！如果你想画一个简单的矩形，只用设好宽高和背景色就行了。这样简单定义一下，就能画出独立的矩形。
跟用背景图啥的比起来，用CSS画矩形更灵活，好改，也好加！只要你页面布局里矩形多，就很省事儿，好用得很。
.circle {
width: 100px;
height: 100px;
background-color: #f00;
border-radius: 50%;
}
四、实现梯形
除了常见的圆形啊、三角形啊、矩形之类的基本图形，有时候咱也得用到梯形这种元素。用CSS3里头的旋转和倾斜功能，你就能快速画出梯形了。先画个长方形，再换上transform属性来玩儿转或倾斜，最后就大功告成了。
用CSS3变形属性画梯形，就是好用！跟费劲地找图或者用很难搞懂的SVG比起来，纯CSS省心又好改。
五、实现菱形
菱形，就是那种介于正方和三角之间的形状，在网站设计里经常会碰到。画出它来其实不难，只要借助 CSS3那个神奇的旋转属性和伪类选择器:before/:after就行！先画个正方形，然后在它上面、下面、左面、右面各放几个缩小版的，再斜着转45度，就能拼出个完整的菱形了。
这个方法巧妙运用CSS3特性和元素，画出一个漂亮的菱形。这样就既能让你看到CSS有多厉害，又能提高页面的外观效果和用户体验。
六、实现星型
大家经常看到的星形装饰图，其实学着用CSS3就能画出来！只要熟悉clip-path属性，配合伪类选择器:before/:after这些小技巧，你也能画出大小各异的星形来。想画五角星还是六角星都随你挑，调个顶点数、角度就行了。
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #0f0;
}
用这个CSS3里的clip-path属性，可以搞出个很好看的星星图案来放在你想装饰的地方！最牛逼的就是它是用纯CSS画出来的，不需要算什么复杂的路径或者找图片，所以操作起来只要灵活就行，速度也快！
七、利用渐变色填充
在图像设计里，渐变色填充挺常见的需求！用CSS3中的线性和环形渐变属性就能搞定了。只需设置好开始颜色、结束颜色还有渐变方向这些参数就行，让你的作品看起来丰富有趣又有层次感。
渐变填充能用让网页更漂亮、有层次感；而且在响应式设计里，无论啥屏多大啥设备，都能完美适应！
八、结合动画效果
网页设计中的动画效果不仅好看，还能吸引眼球，加强互动。用CSS3的animation属性和@keyframes规则来做动画设定，可以给静态图片加上转动或变化的效果。比如，让个圆圈转起来；或者让三角形闪烁跳跃等等。
用好CSS动画效果可以让网页变得更活泼有趣，吸引大家不断地浏览和互动！
九、响应式设计考量
用css画图的时候，别忘了还要注意响应式设计！根据你要呈现的屏幕大小或者设备类型进行相应的调节，让图片看起来好一些。而且也要保持用户体验的一致性。你还能通过@media这个媒体查询规则来改变不同屏幕下的图像展示方式。
懂得响应式设计能让你更牛气！特别注意在CSS画图的时候，别忘了看下它们在各种设备上的效果哦～
.rectangle {
width: 200px;
height: 100px;
background-color: #00f;
}
十、总结
看了这篇文章就知道，用CSS画图真是牛！从简单的圆圆、三角、矩形，再到那些复杂点的梯形、菱形、星星造型，全都是用纯CSS搞定的，厉害？
记住基本的CSS技术后，加上渐进和动画效果让网页充满活力！再加上响应式设计，使你的网站可以在各种设备上都能很好地展示出来。学了这篇文章，希望对大家在用CSS打造漂亮界面上有帮助！
评论0