使用响应式 CSS 添加三角形

Question

我正在努力创建绿色背景的上述设计，两个白色三角形和三角形点上的蓝点。

我必须使用 W3School 教程创建两个三角形，但它们没有响应导致问题。我在 PS 中创建了带有白色三角形和蓝色圆点的绿色背景，但无法让图像在不同屏幕尺寸下处于相同位置。

使用 HTML/CSS 创建上述内容的任何帮助都会很棒。

Answer 1

您可以在一个伪元素上使用 clip-path 来创建类似图形的锯齿形，并在另一个伪元素上使用背景图像来放置蓝点。

请务必注意，所有事情都必须以相对的方式进行，例如%s，以便整体响应。

虽然这对于 zig zag 非常简单，但必须对点的位置进行调整，因为物体是相对于它们的左上角而不是相对于它们的中心放置的，这是我们对圆圈所要求的。

还必须根据宽度指定“背景”的高度（之字形加上一点点低于绿色以适应底部的圆圈）。最终 CSS 纵横比将对此有用，但目前并非所有浏览器都支持它，所以这个 sn-p 使用众所周知的 hack 来定义元素的高度，即填充（其单位始终是宽度） .

* {
  padding: 0;
  margin: 0;
}

.graphbg {
  background: white;
  width: 100vw;
  height: 100vh;
  position: relative;
  margin: 0;
  padding: 0;
}

.graphbg::before,
.graphbg::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  overflow: hidden;
  --w: 4;
  /* set these so --w/--h is the proportion of width to height you want this background to have */
  --h: 1;
  /* soon you will be able to use aspect-ratio: 4 / 1 but currently, August 2021, Safari IOS does not support it */
  height: 0;
  padding-top: calc( var(--h) / var(--w) * 100%);
  /* to force the element to have the right height */
}

.graphbg::before {
  background: green;
  clip-path: polygon(0 0, 98% 0, 50% 95%, 25% 50%, 0 95%);
}

.graphbg::after {
  background-image: radial-gradient(circle, blue 0 70%, transparent 70% 100%), radial-gradient(circle, blue 0 70%, transparent 70% 100%), radial-gradient(blue 0 70%, transparent 70% 100%), radial-gradient(blue 0 70%, transparent 70% 100%);
  background-repeat: no-repeat;
  background-size: 2% 8%;
  background-position: -1% 99%, 24.5% 50%, 50% 97%, 99% -4%;
}

<div class="graphbg"></div>