CSS 网格体育场形状

Question

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

图片代表一个体育场，但很难让它看起来像所附图片。一些注意事项

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

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

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

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;
}

.circle:hover {
  background: blue;
}

<div class="grid">
  <div class="item1">
  </div>
  <div class="item2">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="item3"></div>
  <div class="item4"></div>
  <div class="item5"></div>
  <div class="item6"></div>
  <div class="item7"></div>
  <div class="item8"></div>
  <div class="item9"></div>
</div>

Answer 1

shape-outside 是您所需要的。

这是顶部的基本概念，您可以轻松地复制底部的部分：

body {
  width:780px;
}

.top {
  height:150px;
  text-align:justify;
}
i {
  display:inline-block;
  width:30px;
  height:30px;
  margin:2px;
  background:red;
  border-radius:50%;
}
.top::before {
  content:"";
  height:100%;
  width:150px;
  float:left;
  shape-outside:linear-gradient(to bottom left,transparent 49%,#fff 50%);
}
.top span::before {
  content:"";
  height:100%;
  width:150px;
  float:right;
  shape-outside:linear-gradient(to bottom right,transparent 49%,#fff 50%);
}

.left,
.right{
   width:150px;
   height:150px;
   float:left;
   transform:translateY(-90%);
   clip-path:polygon(0 0,100vh 100vh,0 100vh );
} 
.left::before,
.right::before{
  content:"";
  height:100%;
  width:100%;
  float:right;
  shape-outside:linear-gradient(to bottom left,#fff 49%,transparent 50%);
}
.right {
  float:right;
  text-align:right;
   clip-path:polygon(-100vh 100vh,100vh 100vh,100% 0);
}
.right::before{
  float:left;
  shape-outside:linear-gradient(to bottom right,#fff 49%,transparent 50%);
}

i:hover{
  background:blue;
}

<div class="top"><span></span>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>

<div class="left">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>

<div class="right">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>

更新

体育场形状的完整示例：

var t = document.querySelector('.top');
var tl = document.querySelector('.top-left');
var tr = document.querySelector('.top-right');
var b = document.querySelector('.bottom');
var bl = document.querySelector('.bottom-left');
var br = document.querySelector('.bottom-right');
var sl = document.querySelector('.side-left');
var sr = document.querySelector('.side-right');
for (var i = 0; i < 5000; i++) {
  var l = document.createElement("i");
  t.appendChild(l);
  l = document.createElement("i");
  tl.appendChild(l);
  l = document.createElement("i");
  tr.appendChild(l);
  l = document.createElement("i");
  b.appendChild(l);
  l = document.createElement("i");
  bl.appendChild(l);
  l = document.createElement("i");
  br.appendChild(l);
  l = document.createElement("i");
  sl.appendChild(l);
  l = document.createElement("i");
  sr.appendChild(l);
}

body {
  margin: 0;
}

.stadium {
  display: grid;
  min-width:600px;
  min-height:500px;
  grid-template-columns: 20% 1fr 20%;
  grid-template-rows: 150px 1fr 150px;
  row-gap:10px;
  height: 100vh;
  line-height: 0;
}

.top,
.bottom{
  height: 100%;
  grid-column: 1/-1;
  grid-row: 1;
  text-align: justify;
  overflow: hidden;
}
.bottom {
  grid-row: 3;
}

.top::before,
.bottom::before{
  content: "";
  height: 100%;
  width: 20%;
  float: left;
  shape-outside: linear-gradient(to bottom left, transparent 49%, #fff 50%);
}
.bottom::before{
  shape-outside: linear-gradient(to top left, transparent 49%, #fff 50%);
}

.top span::before,
.bottom span::before {
  content: "";
  height: 100%;
  width: 20%;
  float: right;
  shape-outside: linear-gradient(to bottom right, transparent 49%, #fff 50%);
}
.bottom span::before {
  shape-outside: linear-gradient(to top right, transparent 49%, #fff 50%);
}

.top-left,
.top-right,
.bottom-left,
.bottom-right{
  width: 100%;
  height: 100%;
  float: left;
  grid-row: 1;
  grid-column: 1;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.bottom-left {
  grid-row: 3;
  grid-column: 1;
  clip-path: polygon(0 0, 100% 0,0 100%);
}


.top-left::before,
.top-right::before,
.bottom-left::before,
.bottom-right::before{
  content: "";
  height: 100%;
  width: 100%;
  float: right;
  shape-outside: linear-gradient(to bottom left, #fff 49%, transparent 50%);
}
.bottom-left::before {
  shape-outside: linear-gradient(to top left, #fff 49%, transparent 50%);
}
.top-right,
.bottom-right{
  float: right;
  text-align: right;
  grid-column: 3;
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
}
.bottom-right {
  grid-row: 3;
  clip-path: polygon(0 0, 100% 0,100% 100%);
}

.top-right::before {
  float: left;
  shape-outside: linear-gradient(to bottom right, #fff 49%, transparent 50%);
}
.bottom-right::before {
  float: left;
  shape-outside: linear-gradient(to top right, #fff 49%, transparent 50%);
}

.side-right,
.side-left {
 height:100%;
 overflow:hidden;
}
.side-right {
  grid-column:3;
  text-align:right;
}

i {
  display: inline-block;
  vertical-align: top;
  width: 8px;
  height: 8px;
  margin: 1px;
  background: red;
  border-radius: 50%;
}

i:hover {
  background: blue;
}

<div class="stadium">
  <div class="top-left"></div>
  <div class="top"><span></span></div>
  <div class="top-right"></div>
  
  <div class="bottom-left"></div>
  <div class="bottom"><span></span></div>
  <div class="bottom-right"></div>
  
  <div class="side-left"></div>
  <div class="side-right"></div>
</div>