如何在html中创建几何图形

Posted 2023-03-05

技术标签:

【中文标题】如何在html中创建几何图形【英文标题】：How to create geometric shapes in html 【发布时间】：2018-08-16 09:15:36 【问题描述】：

我只想使用 html 和 CSS 创建上面的图像。有人可以帮帮我吗？

【问题讨论】：

显示到目前为止你尝试了什么[代码]？你试过了吗？分享你的代码你最好使用 SVG 我没有任何源代码...我只想创建这样的设计。甚至我也不明白为什么所有人都对我的问题持否定态度。我只问了一个问题。谁都否定请检查答案：P 【参考方案1】：

我确信有更优雅的方法可以完成您正在寻找的内容，但可以使用 SVG、z-Index、不透明度和剪辑来完成。

运行代码，我想你会看到它匹配。颜色可能不准确，但它们足够接近，可以告诉你去哪里。您还可以将样式与 HTML 分开并放入 CSS 文件中，但我以这种方式构建它更快。

我希望这会有所帮助。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#col1 
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: 3;

#col2 
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: 1;

#col3 
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: -2;

#col3a 
    opacity: 0.90;
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: 1;

#col4 
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: -3;

#col4a 
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: 4;

#col5 
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: -4;

#col6 
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: -5;

#col7 
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed; 
    display: block;
    z-index: -6;

#col8 
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: block;
    z-index: -7;

</style>
</head>
<body>
<div id="col1">
<svg  >
  <circle cx="0" cy="0" r="100" fill="#ffffff" />
  <circle cx="0" cy="200" r="100" fill="#ffffff" />
  <circle cx="0" cy="400" r="100" fill="#ffffff" />
  <circle cx="0" cy="600" r="100" fill="#ffffff" />
  <circle cx="0" cy="800" r="100" fill="#ffffff" />
</svg>
</div>
<div id="col2">
<svg  >
  <circle cx="100" cy="100" r="100" fill="#aba31a" />
  <circle cx="100" cy="300" r="100" fill="#aba31a" />
  <circle cx="100" cy="500" r="100" fill="#aba31a" />
  <circle cx="100" cy="700" r="100" fill="#aba31a" />
</svg>
</div>
<div id="col3">
<svg  >
  <circle cx="200" cy="0" r="100" fill="#ffffff" />
  <circle cx="200" cy="200" r="100" fill="#ffffff" />
  <circle cx="200" cy="400" r="100" fill="#ffffff" />
  <circle cx="200" cy="600" r="100" fill="#ffffff" />
  <circle cx="200" cy="800" r="100" fill="#ffffff" />
</svg>
</div>
<div id="col3a">
<svg  >
  <circle cx="200" cy="200" r="100" fill="#326e78" />
  <circle cx="200" cy="400" r="100" fill="#326e78" />
  <circle cx="200" cy="600" r="100" fill="#326e78" />
  <circle cx="200" cy="800" r="100" fill="#326e78" />
</svg>
</div>
<div id="col4">
<svg  >
  <circle cx="300" cy="100" r="100" fill="#aba31a" />
  <circle cx="300" cy="300" r="100" fill="#aba31a" />
  <circle cx="300" cy="500" r="100" fill="#aba31a" />
  <circle cx="300" cy="700" r="100" fill="#aba31a" />
</svg>
</div>
<div id="col4a">
<svg   >
  <defs>
    <clipPath id="clip1">
      <circle cx="200" cy="0" r="100" />
      <circle cx="200" cy="200" r="100" />
    </clipPath>
  </defs>
  <circle cx="300" cy="100" r="100" fill="#ffffff" clip-path="url(#clip1)" />
  <defs>
    <clipPath id="clip2">
      <circle cx="200" cy="200" r="100" />
      <circle cx="200" cy="400" r="100" />
    </clipPath>
  </defs>
  <circle cx="300" cy="300" r="100" fill="#ffffff" clip-path="url(#clip2)" />
  <defs>
    <clipPath id="clip3">
      <circle cx="200" cy="400" r="100" />
      <circle cx="200" cy="600" r="100" />
    </clipPath>
  </defs>
  <circle cx="300" cy="500" r="100" fill="#ffffff" clip-path="url(#clip3)" />
  <defs>
    <clipPath id="clip4">
      <circle cx="200" cy="600" r="100" />
      <circle cx="200" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="300" cy="700" r="100" fill="#ffffff" clip-path="url(#clip4)" />
  <defs>
    <clipPath id="clip5">
      <circle cx="200" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="300" cy="900" r="100" fill="#ffffff" clip-path="url(#clip5)" />
</svg>
</div>
<div id="col5">
<svg  >
  <circle cx="400" cy="0" r="100" fill="#ffffff" />
  <circle cx="400" cy="200" r="100" fill="#ffffff" />
  <circle cx="400" cy="400" r="100" fill="#ffffff" />
  <circle cx="400" cy="600" r="100" fill="#ffffff" />
  <circle cx="400" cy="800" r="100" fill="#ffffff" />
</svg>
</div>
<div id="col3a">
<svg  >
  <circle cx="400" cy="200" r="100" fill="#326e78" />
  <circle cx="400" cy="400" r="100" fill="#326e78" />
  <circle cx="400" cy="600" r="100" fill="#326e78" />
  <circle cx="400" cy="800" r="100" fill="#326e78" />
</svg>
</div>
<div id="col6">
<svg  >
  <circle cx="500" cy="100" r="100" fill="#aba31a" />
  <circle cx="500" cy="300" r="100" fill="#aba31a" />
  <circle cx="500" cy="500" r="100" fill="#aba31a" />
  <circle cx="500" cy="700" r="100" fill="#aba31a" />
</svg>
</div>
<div id="col4a">
<svg   >
  <defs>
    <clipPath id="clip6">
      <circle cx="400" cy="0" r="100" />
      <circle cx="400" cy="200" r="100" />
    </clipPath>
  </defs>
  <circle cx="500" cy="100" r="100" fill="#ffffff" clip-path="url(#clip6)" />
  <defs>
    <clipPath id="clip7">
      <circle cx="400" cy="200" r="100" />
      <circle cx="400" cy="400" r="100" />
    </clipPath>
  </defs>
  <circle cx="500" cy="300" r="100" fill="#ffffff" clip-path="url(#clip7)" />
  <defs>
    <clipPath id="clip8">
      <circle cx="400" cy="400" r="100" />
      <circle cx="400" cy="600" r="100" />
    </clipPath>
  </defs>
  <circle cx="500" cy="500" r="100" fill="#ffffff" clip-path="url(#clip8)" />
  <defs>
    <clipPath id="clip9">
      <circle cx="400" cy="600" r="100" />
      <circle cx="400" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="500" cy="700" r="100" fill="#ffffff" clip-path="url(#clip9)" />
  <defs>
    <clipPath id="clip10">
      <circle cx="400" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="500" cy="900" r="100" fill="#ffffff" clip-path="url(#clip10)" />
</svg>
</div>
<div id="col7">
<svg  >
  <circle cx="600" cy="0" r="100" fill="#ffffff" />
  <circle cx="600" cy="200" r="100" fill="#ffffff" />
  <circle cx="600" cy="400" r="100" fill="#ffffff" />
  <circle cx="600" cy="600" r="100" fill="#ffffff" />
  <circle cx="600" cy="800" r="100" fill="#ffffff" />
</svg>
</div>
<div id="col3a">
<svg  >
  <circle cx="600" cy="200" r="100" fill="#326e78" />
  <circle cx="600" cy="400" r="100" fill="#326e78" />
  <circle cx="600" cy="600" r="100" fill="#326e78" />
  <circle cx="600" cy="800" r="100" fill="#326e78" />
</svg>
</div>
<div id="col8">
<svg  >
  <circle cx="700" cy="100" r="100" fill="#aba31a" />
  <circle cx="700" cy="300" r="100" fill="#aba31a" />
  <circle cx="700" cy="500" r="100" fill="#aba31a" />
  <circle cx="700" cy="700" r="100" fill="#aba31a" />
</svg>
</div>
<div id="col4a">
<svg   >
  <defs>
    <clipPath id="clip11">
      <circle cx="600" cy="0" r="100" />
      <circle cx="600" cy="200" r="100" />
    </clipPath>
  </defs>
  <circle cx="700" cy="100" r="100" fill="#ffffff" clip-path="url(#clip11)" />
  <defs>
    <clipPath id="clip12">
      <circle cx="600" cy="200" r="100" />
      <circle cx="600" cy="400" r="100" />
    </clipPath>
  </defs>
  <circle cx="700" cy="300" r="100" fill="#ffffff" clip-path="url(#clip12)" />
  <defs>
    <clipPath id="clip13">
      <circle cx="600" cy="400" r="100" />
      <circle cx="600" cy="600" r="100" />
    </clipPath>
  </defs>
  <circle cx="700" cy="500" r="100" fill="#ffffff" clip-path="url(#clip13)" />
  <defs>
    <clipPath id="clip14">
      <circle cx="600" cy="600" r="100" />
      <circle cx="600" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="700" cy="700" r="100" fill="#ffffff" clip-path="url(#clip14)" />
  <defs>
    <clipPath id="clip15">
      <circle cx="600" cy="800" r="100" />
    </clipPath>
  </defs>
  <circle cx="700" cy="900" r="100" fill="#ffffff" clip-path="url(#clip15)" />
</svg>
</div>  
<div id="col3a">
<svg  >
  <circle cx="800" cy="200" r="100" fill="#326e78" />
  <circle cx="800" cy="400" r="100" fill="#326e78" />
  <circle cx="800" cy="600" r="100" fill="#326e78" />
  <circle cx="800" cy="800" r="100" fill="#326e78" />
</svg>
</div>
<div id="col1">
<svg  >
  <circle cx="900" cy="100" r="100" fill="#ffffff" />
  <circle cx="900" cy="300" r="100" fill="#ffffff" />
  <circle cx="900" cy="500" r="100" fill="#ffffff" />
  <circle cx="900" cy="700" r="100" fill="#ffffff" />
  <circle cx="900" cy="900" r="100" fill="#ffffff" />
</svg>
</div>
</body>
</html>

【讨论】：

@ShanuShaji 我很享受解决这个问题的挑战，尽管光明会认为这不适合交换。享受吧！不知道这一点的人，他们把负面标志：P

以上是关于如何在html中创建几何图形的主要内容，如果未能解决你的问题，请参考以下文章

（如何）在 boost 几何中创建自己的多边形类型并使用 multi_polygon 类型？

如何在 X11 中创建没有框架的 GUI？

如何在 Swift Xcode 中创建自定义导航栏？

Java 在PPT中创建SmartArt图形读取SmartArt图形中的文本

如何在 OpenGL 中创建调试标记？