在网页中定义多个区域（没有多边形）

Question

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

我不知道很多事情：

• 我不知道是否可能;
• 根据GUI创建理论，我不知道这是不是一个好习惯;
• 我不知道，如果有可能构建这样的东西，它也与大多数浏览器兼容（我不介意）。

建立一个这样的页面，也许是一件疯狂的事情，而且由于我的经验不足，我不知道。我只想在这个意义上理解html和css的潜力和局限。

谢谢。

Answer 1

旧学校的做法...图像地图，但整个网站不可行的标准是afaik

Answer 2

您可以使用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>

Answer 3

大多数元素都是矩形，但是有一些像“border-radius”这样的选项可以使元素看起来像一个圆圈。只需谷歌“CSS圈子”;你会发现这样的博客：http://davidwalsh.name/css-circles

另一种更复杂，更强大的方法是在HTML5中使用“canvas”。您可以定义自定义形状，只需查找此网站：http://www.w3schools.com/html/html5_canvas.asp

最后但并非最不重要的是，您可以使用SVG图像。我不知道，你将要做什么，但在某些情况下（仅用于显示没有交互的可扩展元素），它的效果很好。