html - CSS，是否可以在没有图像的情况下实现这一目标？

Question

我正在制作一个网站，在大多数网站上都有一个大图像，其中有大量文本，上面写着“欢迎”或我复制了相同内容的内容，但我想知道 OptimisePC 后面的照片中的图像是否可以通过以下方式实现纯CSS所以没有图像，这是出于性能原因，因为人们必须下载图像才能看到它，这需要时间。

Answer 1

SVG

这是一个 svg 解决方案。
通过将 svg 元素的宽度设置为 100%，它会在水平/x 方向上随页面缩放。
换句话说，这个背景是响应式的。

Added the menu for fun.

body {
  margin: 0;
}
.content {
  width: 100%;
}
/* SVG background */

.svg-background {
  width: 100%;
  height: 100%;
}
.svg-background polygon:nth-child(1) {
  fill: #005A50;
  stroke: #005A50;
  stroke-width: 0.1;
}
.svg-background polygon:nth-child(2) {
  fill: #007367;
}
.svg-background polygon:nth-child(3) {
  fill: #1C9F91;
  stroke: #1C9F91;
  stroke-width: 0.1;
}
.svg-background polygon:nth-child(4) {
  fill: #3DAEA2;
}
/* NAVBAR  Many for making it look better :D*/

.navigation {
  background-color: #222;
}
.menu-bar {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 50px;
}
.menu-bar li {
  display: inline-block;
  color: white;
  font-size: 20px;
  //dding: 15px;
  padding-right: 15px;
  padding-left: 15px;
  line-height: 2em;
  height: 100%;
}
.menu-bar li:hover {
  background-color: #72B1D7;
}

<nav class="navigation">
  <ul class="menu-bar">
    <li>OptimisePCs</li>
    <li>Home</li>
    <li>About</li>
    <li>Services</li>
  </ul>
</nav>
<div class="content">
  <svg class="svg-background" viewBox="0 0 100 100">
    <polygon points="0,0 10,0 0,20" />
    <polygon points="10,0 0,20 0,100 50,100" />
    <polygon points="10,0 50,100 70,100 80,0" />
    <polygon points="80,0 70,100 100,100 100,0" />
  </svg>
</div>