不规则形状作为链接

Question

我有这样的元素要编码。有一些不规则的形状必须编码为 hyperlinks。一种形状和一种link。由于这些不规则的形状，我无法将其编码为矩形。

例如： "Doradztwo" 及其不规则的紫色背景应该是可点击的。 "Pozotale"等

也一样

Answer 1

根据您的页面设置方式，使用以下任一方法：

如果是图片
<area>

如果是使用的图片
只需用 a-tag 包裹图片即可。

<a href="doradztwo.php"><img src="Doradztwo.png" /></a>

编辑：
如果你想使用标签，你可以通过这个网站来实现：https://www.image-maps.com/
看看我做的这个例子：http://jsfiddle.net/68a5mud5/
你得到的点数越多，你能做的就越圆。这是使用多边形制作的，因为它允许您设置点。

Answer 2

您可以使用旋转的伪元素将圆分成 3 个扇区，然后将第一个和最后一个子元素旋转到 'fill' 圆：

.wrap {
  position: relative;
  height: 200px;
  width: 200px;
}
.section {
  height: 50%;
  width: 50%;
  background: tomato;
  border-radius: 0 0 100% 0;
  position: absolute;
  top: 55%;
  left: 55%;
  display: inline-block;
  cursor: pointer;
  text-align: right;
}
.section:before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: inherit;
  left: 0;
  transform: rotate(30deg);
  transform-origin: -5% -5%;
}
.section:nth-of-type(1) {
  transform: rotate(150deg);
  transform-origin: -5% -5%;
}
.section:nth-of-type(2) {
  transform: rotate(30deg);
  transform-origin: -5% -5%;
}
.section:nth-of-type(3) {
  transform: rotate(270deg);
  transform-origin: -5% -5%;
}
.section:hover {
  background: cornflowerblue;
}
.middle {
  position: absolute;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: gray;
  top: 50%;
  left: 50%;
  transform: translate(-45%, -45%);
  border:10px solid white;
}

<div class="wrap">
  <div class="section">section 1</div>
  <div class="section">section 2</div>
  <div class="section">section 3</div>
  <div class="middle"></div>
</div>

如果您想重新定位或 'unrotate' 文本，那么您可能需要调整 css 或添加一个 span 元素并在标记中相应地取消旋转它（同样，使用 child选择器适当）。

不规则形状作为链接

Irregular shapes as links

html

css

css-shapes