内容简介：梯形
很多小伙伴在做开发的时候，遇到一些要画很多形状的时候，就很纠结了，知道怎么用CSS去布局，就是不知道怎么画图案。
其实使用CSS可以绘制出很多形状，比如三角形，梯形，圆形，椭圆形等等，并不是只能画矩形。
今天的教程，就来教大家怎么去用CSS绘制这些图形吧。
为了方便大家去理解，今天分成基本形状和组合形状来一起讲解吧，基本形状是非常好理解的，再利用这些基本形状进行组合，就可以实现稍微复杂的组合形状了。
基本形状
三角形
梯形
圆形
椭圆
球体
半圆
菱形
组合形状
心形
心形是由两个圆形和一个矩形进行组合得到的。
扇形
扇形是由一个圆形和一个矩形进行组合得到的，用矩形遮住圆形的一部分就形成了扇形。
五边形
五边形是由一个三角形和一个梯形进行组合得到的。
六边形
六边形是由两个三角形和一个矩形进行组合得到的。
长方体
长方体是由六个矩形进行组合得到的。
圆柱体
圆柱体是由一个椭圆和一个圆角矩形进行组合得到的。
棱锥
棱锥是由四个三角形和一个矩形进行组合得到的。
最后
今天讲的内容里，有些可能大家会觉得有些比较难实现，其实你也可以使用 clip-path 这一个属性，绘制各种形状。
当然，CSS能绘制的东西，远不止这些。还有许多东西今天一下子讲不完，今天讲的都是比较基础的一些，对这个感兴趣的小伙伴可以后面自己去探索一下。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- c – 如何使用QPainter或QPainterPath使用一个形状或一组形状连接在Qt中绘制自定义形状(如撕裂)
- 用CSS画一些多边形状
- css揭秘实战技巧 - 形状 [二]
- 45个值得收藏的 CSS 形状
- css绘制各种形状图形（第二版）
- 你该知道的《css揭秘》--形状篇
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
JavaScript设计模式与开发实践
曾探 / 人民邮电出版社 / 2015-5 / 59.00元
本书在尊重《设计模式》原意的同时，针对JavaScript语言特性全面介绍了更适合JavaScript程序员的了16个常用的设计模式，讲解了JavaScript面向对象和函数式编程方面的基础知识，介绍了面向对象的设计原则及其在设计模式中的体现，还分享了面向对象编程技巧和日常开发中的代码重构。本书将教会你如何把经典的设计模式应用到JavaScript语言中，编写出优美高效、结构化和可维护的代码。一起来看看 《JavaScript设计模式与开发实践》 这本书的介绍吧!
