单个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% .........完整代码请登录后点击上方下载按钮下载查看