html - 在网页中定义多个区域(没有多边形)

Question

我想知道是否可以在网页中定义多个区域。我不是在谈论经典的矩形划分(由“div”制作)，而是更多:定义各种形状的区域，也许不是多边形，如下图所示。

很多事情我都不知道:

• 我不知道是否可行；
• 根据 GUI 创建理论，我不知道这是否是一个好的做法；
• 我不知道如果可以构建这样的东西，它是否也与大多数浏览器兼容(我不介意)。

构建这样的页面，也许是一件疯狂的事情，以我的经验不足，我不知道。我只是想从这个意义上理解 html 和 css 的潜力和局限性。

谢谢。

Answer 1

您可以通过这种方式(例如)使用 CSS 创建圆形 DIV:

.circle {
    border-radius: 50%;
}

.circle1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.circle2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}

并在您的 DIV 中使用此 CSS:

<div class="circle circle1"></div>

<div class="circle circle2"></div>