小编Ada*_* M.的帖子

我一直在尝试在 CSS Grid 上使用下图，但结果非常具有挑战性

该图像代表一个体育场，但很难使它看起来像所附的图像。几点考虑

• 角是三角形，所以最难的部分是使它们具有那种形状并且响应迅速。

• 我可以使用 CSS Mask 来处理形状和间距，但这会切断几个圆圈。

我做了我的尝试，错误和错误，并成功了一半。知道如何使它工作吗？或者如果有人有不同的方法也会帮助我

https://jsfiddle.net/rodboc/9psa4bg3/1/

有什么想法吗？

.grid {
  max-width: 80vw;
  min-height: 90vh;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 30% [main-start] 40% [main-end] 30%;
  grid-template-rows: 20% [main-start] 30% [main-end] 20%;
  margin: 0 auto;
}

[class^="item"] {
  background-color: blue;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
}

.item1 {
  background-color: red;
  grid-area: main;
}
.circle {
  width: 5px;
  height: 5px;
  overflow: hidden;
  background: #ccc;
  border-radius: 50%;
  margin: 1px;
  padding: 0;
} …

应该<main>考虑放入重要的东西<section>吗？像有很多带<main>“文章”的文章<section>？如果没有，那么如何一起使用？

如何隐藏整个内容,例如黑色或图像,但是当页面加载时我看不到任何内容,只看到那种颜色.