不规则的形状作为链接

Question

我有这样的代码元素。有不规则的形状，必须编码为超链接。一个形状和一个链接。由于这些不规则的形状，我无法将其编码为矩形。

例如： “Doradztwo”及其不规则的紫罗兰色背景应该是可点击的。 “Pozotale”等也一样。

Answer 1

您可以使用旋转的伪元素将圆圈分成3个扇区，然后将第一个和最后一个孩子旋转到“填充”状态。圈子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果你想重新定位或“不旋转”。在文本中，您可能需要调整css或添加span元素并相应地在标记中旋转它（再次，适当地使用子选择器）。

Answer 2

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

如果是图片
<area>

如果是使用＆lt; img＆gt; 的图像 只需用a-tag包装图像。

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

修改
如果您想使用＆lt; area＆gt;标签，您可以使用此网站：https://www.image-maps.com/
看看我做的这个例子：http://jsfiddle.net/68a5mud5/
你制作的积分越多，你就越圆。这是使用多边形制作的，因为它允许您设置点。