CSS - 如何使用渐变色制作锥形

Question

我正在尝试复制显示用户面向方向的谷歌地图标记。它具有锥形/光束/闪光灯类型的形状，从颜色渐变为透明。

当我谷歌 css 形状时，这是创建圆锥形状的建议方法之一：

.cone {
  height: 0;
  width: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 100px solid #07CAF3;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

<div class="cone"></div>

但是因为它是由边框组成的，所以我无法对其应用渐变。

有什么想法吗？

Answer 1

使用 conic-gradient 结合蒙版：

.box {
  width:200px;
  height:100px;
  border-radius:50%;
  background:conic-gradient(from -45deg at bottom,#0000, blue 1deg 90deg, #0000 91deg);
  -webkit-mask:linear-gradient(#0000,#000);
}

<div class="box"></div>

OR 一个径向渐变的和应用于蒙版的圆锥：

.box {
  width:200px;
  height:100px;
  background:radial-gradient(farthest-side at bottom,blue ,#0000);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000, #000 1deg 90deg, #0000 91deg);
}

<div class="box"></div>

Answer 2

@temaniafif 的蒙版创意可能是最好的创意，但您也可以有两个背景图像，并在径向图像中使用颜色和百分比偏移/不透明度来获得您想要的效果：

    if (len(cursor.execute(sql).fetchall())) < 1: # checks there will be data by seeing if the length of the list make when getting the data is at least 1
        print("No data gathered from statement") #
    else:
       #RUN CODE HERE

div {
  background-image: conic-gradient(transparent 0deg, transparent 45deg, white 45deg, white 315deg, transparent 315deg, transparent 360deg), radial-gradient(rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0.2) 30%, rgba(0, 0, 0, 0.1) 70%, transparent 80%);
  background-size: 100% 100%;
  width: 75vmin;
  height: 75vmin;
  border-radius: 50%;
}