【问题标题】:Adding triangles with CSS that are responsive使用响应式 CSS 添加三角形
【发布时间】:2021-08-30 21:46:10
【问题描述】:

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

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

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

【问题讨论】:

  • 只是观察 - 两个蓝点不在白色三角形的点上,设计中可能有也可能没有两个白色三角形。使用剪辑路径怎么样?
  • 希望您至少尝试自己编写代码。我建议你做一些additional research,无论是通过谷歌还是通过搜索,尝试一下。如果您仍然遇到问题,请返回您的代码并解释您尝试过的操作。
  • 我花了很多时间尝试编写此代码。我主要在寻找什么来创建这些形状并添加蓝点并发布这个问题不是为了得到答案,而是更多地指向正确的方向。我完全理解您的观点,并且通过@AHaworth 给出的答案,我现在有很多需要研究的内容以及我需要完全理解的新 CSS 属性。谢谢

标签: css responsive-design responsive-images


【解决方案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>

【讨论】:

  • 谢谢@AHaworth,这就是我所追求的。我将对剪辑路径进行一些研究,并更多地研究伪元素。谢谢!
猜你喜欢
  • 2013-07-23
  • 2019-08-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-01-09
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多