建站
咨询
售后
建站咨询
css如何使用conic-gradient绘制三角形
这篇文章将为大家详细讲解有关css如何使用conic-gradient绘制三角形，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比北海街道网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式北海街道网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖北海街道地区。费用合理售后完善，10多年实体公司更值得信赖。
使用 conic-gradient 绘制三角形
还是渐变，上述我们使用了线性渐变实现三角形，有意思的是，在渐变家族中，角向渐变 conic-gradient 也可以用于实现三角形。
方法在于，角向渐变的圆心点是可以设置的，类似于径向渐变的圆心点也可以被设置。
我们将角向渐变的圆心点设置于 50% 0，也就是 center top，容器最上方的中间，再进行角向渐变，渐变到一定的角度范围内，都是三角形图形。
假设我们有一个 200px x 100px 高宽的容器，设置其角向渐变圆心点为 50% 0：
并且，设置它从 90° 开始画角向渐变图，示意图如下：
可以看到，在初始的时候，角向渐变图形没有到第二条边的之前，都是三角形，我们选取适合的角度，非常容易的可以得到一个三角形：
关于“css如何使用conic-gradient绘制三角形”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
标题名称：css如何使用conic-gradient绘制三角形
文章来源：http://sczitong.cn/article/pjsihs.html
