单个div+css实现化学元素结果图代码-html代码-BFW代码库

单个div+css实现化学元素结果图代码

代码语言：html

代码描述：单个div+css实现化学元素结果图代码

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

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

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

  
  
  
<style>
/* use SVG. this was just a test. */
.component {
  --c: #000;
  font-size: 1vmin;
  width: 80em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1.2;
  background:
    /* part 1 */
    linear-gradient(var(--c) 0 0) 29% 52% / 0.5em 17%,
    linear-gradient(var(--c) 0 0) 60% 49% / 0.5em 17%,
    linear-gradient(var(--c) 0 0) 63% 49% / 0.5em 22%,
    linear-gradient(27deg, #0000 40.5%, var(--c) 0 44%, #0000 0) 33.5% 64.75% / 14% 15%,
    linear-gradient(27deg, #0000 40.5%, var(--c) 0 44%, #0000 0) 55.25% 28% / 17.5% 15%,
    linear-gradient(-27deg, #0000 40.5%, var(--c) 0 44%, #0000 0) 57% 64.5% / 14% 15%,
    linear-gradient(-27deg, #0000 40.5%, var(--c) 0 44%, #0000 0) 36.9% 27% / 14% 15%,
    linear-gradient(var(--c) 0 0) 44% 14.5% / 0.5em 17%,
    linear-gradient(var(--c) 0 0) 47.7% 14.5% / 0.5em 17%,
    linear-gradient(var(--c) 0 0) 46% 85% / 0.5em 12%,
    linear-gradient(152deg, #0000 41%, var(--c) 0 44%, #0000 0) 17% 66% / 15% 15%,
    linear-gradient(152deg, #0000 41%, var(--c) 0 44%, #0000 0) 19% 70.25% / 14% 15%,
    linear-gradient(-153deg, #0000 40%, var(--c) 0 44%, #0000 0) 16.5% 33% / 11% 15%,
    /* part 2 */
    linear-gradient(164deg, #0000 40.5%, var(--c) 0 44%, #0000 0) 74.5% 35% / 16% 15%,
    linear-gradient(-164deg, #0000 40.25%, var(--c) 0 44%, #0000 0) 74.5% 66.6% / 16% 15%,
    linear-gradient(51deg, #0000 40.5%, var(--c) 0 44%, #0000 0) 96% 40.5% / 12.5% 15%,
    linear-gradient(-51.5deg, #0000 40.5%, var(--c) 0 44%, #0000 0) 92.75% 56.75% / 12.5% 14%,
    linear-gradient(-51.5deg, #0000 40%, var(--c) 0 45%, #0000 0) 87.5% 55% / 10% 10%,
    linear-gradient(-66.6deg, #0000 40%, var(--c) 0 45.5%, #0000 0) 87.5% 19% / 9% 10.5%,
    /* Ns */
    linear-gradient(var(--c) 0 0) 27% 38% / 0.5em 5.5%,
    linear-gradient(var(--c) 0 0) 30% 38% / 0.5em 5.5%,
    linear-gradient(55deg, #0000 48%, var(--c) 0 58%, #0000 0) 27.8% 38% / 3% 5.5%,
    linear-gradient(var(--c) 0 0) 44.5% 72% / 0.5em 5.5%,
    linear-gradient(var(--c) 0 0) 47.5% 72% / 0.5em 5.5%,
    linear-gradient(55deg, #0000 48%, var(--c) 0 58%, #0000 0) 45.75%.........完整代码请登录后点击上方下载按钮下载查看