0

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

以非多边形形状划分的网页

我不知道很多事情：

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

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

谢谢你。

4

3 回答 3

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>
于 2014-06-20T15:29:43.393 回答
2

这样做的老派方式......图像地图，但整个网站不可行的标准是afaik

于 2013-03-26T15:15:12.703 回答
1

大多数元素都是矩形，但是有一些选项，比如“border-radius”，可以让元素看起来和表现得像一个圆。只需谷歌搜索“CSS Circles”；你会发现这样的博客：http: //davidwalsh.name/css-circles

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

最后但同样重要的是，您可以使用 SVG 图像。我不知道你要做什么，但在某些情况下（仅用于显示没有交互的可缩放元素）它工作得很好。

于 2013-03-26T15:05:15.953 回答