css实现三种锥形渐变效果代码-html代码-BFW代码库

css实现三种锥形渐变效果代码

代码语言：html

代码描述：css实现三种锥形渐变效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  

<style>
.xyz {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100vw;
  height: 33vw;
}

.x {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.x .left {
  transform: scaleX(-1);
  background: conic-gradient(from 315deg at 50% 75%, transparent, #444, black), conic-gradient(from 225deg at 50% 25%, black, #444, transparent), conic-gradient(#f672ca, #f672ca), black;
  background-repeat: no-repeat;
  background-position: 0, 0, 0.1vmin 0;
}
.x .right {
  background: conic-gradient(from 315deg at 50% 75%, transparent, #444, black), conic-gradient(from 225deg at 50% 25%, black, #444, transparent), #6eccee;
}

.y {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.y .left {
  transform: scaleX(-1);
  background: conic-gradient(from 0deg at 0% 75%, transparent, #444, black), conic-gradient(from 225deg at 50% 25%, black, #444, transparent), conic-gradient(#f672ca, #f672ca);
  background-repeat: no-repeat;
  background-position: 0, 0, 0.1vmin 0;
}
.y .right {
  background: conic-gradient(from 0deg at 0% 75%, transparent, #444, black), conic-gradient(from 225deg at 50% 25%, black, #444, transparent), #6eccee;
}

.z {
  --c1: #f672ca;
  --c2: #6eccee;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform: translateX(-1px);
}
.z .left {
  transform: scaleX(-1) translateX(-1px);
  background: conic-gradient(from 270deg at 50% 75%, transparent, #444, black), conic-gradient(from 270deg at 50% 25%, black, #444, transparent), conic-gradient(from 314.3deg at 50% 75%, var(--c1), transparent 75%, var(--c2) 75%, #94e3ff), conic-gradient(var(--c1), var(--c1));
  background-repeat: no-repeat;
  background-position: 0, 0, 0, 0.2vmin 0;
}
.z .right {
  background: conic-gradient(from 270deg at 50% 75%, transparent, #444, black), conic-gradient(from 270deg at 0% 75%, transparent, rgba(0, 0, 0, 0.3)), conic-gradient(from 225deg at 50% 25%, #dd72b9, .........完整代码请登录后点击上方下载按钮下载查看