css如何使用conic-gradient绘制三角形

这篇文章将为大家详细讲解有关css如何使用conic-gradient绘制三角形，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司-专业网站定制、快速模板网站建设、高性价比北海街道网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式北海街道网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖北海街道地区。费用合理售后完善，10多年实体公司更值得信赖。

使用 conic-gradient 绘制三角形

还是渐变，上述我们使用了线性渐变实现三角形，有意思的是，在渐变家族中，角向渐变 conic-gradient 也可以用于实现三角形。

方法在于，角向渐变的圆心点是可以设置的，类似于径向渐变的圆心点也可以被设置。

我们将角向渐变的圆心点设置于 50% 0，也就是 center top，容器最上方的中间，再进行角向渐变，渐变到一定的角度范围内，都是三角形图形。

假设我们有一个 200px x 100px 高宽的容器，设置其角向渐变圆心点为 50% 0：

并且，设置它从 90° 开始画角向渐变图，示意图如下：

可以看到，在初始的时候，角向渐变图形没有到第二条边的之前，都是三角形，我们选取适合的角度，非常容易的可以得到一个三角形：