如何编写不使用calc函数的conic-gradient锥形渐变代码

实现方案 #

原代码中calc仅用来计算背景偏移量和背景尺寸，我们可以用CSS原生的背景边偏移语法替代百分比加法运算，同时将固定参数的计算结果直接写入代码，即可完全移除calc函数，最终渲染效果和原代码完全一致。

修改后完整代码如下：

CSS 代码

.exitnew {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  
  --c: green 90deg, blue 0;
  /* 完全移除calc，用边偏移语法实现相同定位，背景尺寸直接写入计算后的固定值 */
  background: conic-gradient(from 90deg at 7px 7px, var(--c)) right -3.5px bottom -3.5px / 31px 31px;
  border: 5px solid red;
  border-radius: 50%;
  transform: rotate(45deg);
}

HTML 代码

<button class="exitnew" type="button" aria-label="Close"></button>

如果需要保留线宽变量的灵活性，也可以把衍生参数也定义为CSS变量，不需要额外使用calc：

.exitnew {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  
  --b: 7px;
  --b-offset: -3.5px;
  --bg-size: 31px;
  --c: green 90deg, blue 0;
  background: conic-gradient(from 90deg at var(--b) var(--b), var(--c)) right var(--b-offset) bottom var(--b-offset) / var(--bg-size) var(--bg-size);
  border: 5px solid red;
  border-radius: 50%;
  transform: rotate(45deg);
}

内容的提问来源于stack exchange，提问作者user17382064