添加具有响应的 CSS 的三角形

Question

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

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

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

Answer 1

您可以在伪元素上使用 clip-path 在另一个伪元素上创建图形之字形和背景图像以放置蓝点。

重要的是要注意，一切都必须以相对的方式进行，例如%s，这样整体就有反应了。

虽然这对于锯齿形来说非常简单，但必须对点的放置进行调整，因为东西是相对于它们的左上角而不是相对于它们的中心放置的，这正是我们对圆圈的要求.

'background' 的高度（之字形加上绿色下方一点点以容纳底部的圆圈）也必须根据宽度指定。最终 CSS 宽高比对此很有用，但目前并非所有浏览器都支持它，因此此代码段使用了众所周知的技巧，即根据填充定义元素的高度（单位始终是宽度）。

* {
  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>

添加具有响应的 CSS 的三角形

Adding triangles with CSS that are responsive

css

responsive-design

responsive-images