奇怪的知识又增加了 ☞ 用css画一个饼图（conic-gradient）

最新推荐文章于 2022-10-27 13:55:24 发布

magic-zhu

最新推荐文章于 2022-10-27 13:55:24 发布

阅读量471

点赞数

分类专栏：奇怪的知识文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_38616850/article/details/106920531

版权

奇怪的知识专栏收录该内容

3 篇文章 0 订阅

订阅专栏

conic-gradient 是啥

以下是mdn原文

The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the data type, which is a special kind of .

大概意思就是锥形渐变返回值是一种特殊的图片格式

兼容性不好 😌 没关系好玩就可以了
在这里插入图片描述

奇奇怪怪的画出一个饼图 😜

在这里插入图片描述

	.piegraph {
	    display: inline-block;
	    width: 500px;
	    height: 500px;
	    border-radius: 50%;
	    background-image: conic-gradient(yellow 0,red 90deg,blue 180deg,green 270deg,yellow 360deg);
	  }

在这里插入图片描述

.piegraph {
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: conic-gradient(yellow 0 90deg,red 90deg 180deg,blue 180deg 270deg,green 270deg 360deg);
  }

在这里插入图片描述


.piegraph {
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: conic-gradient(from 0 at 25% 25% , yellow 0 90deg ,red 90deg 180deg,blue 180deg 270deg,green 270deg 360deg);
  }