html - 不规则形状作为链接

Question

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

例如:“Doradztwo”及其不规则的紫色背景应该是可点击的。 “Pozotale”等也是如此。

Answer 1

您可以使用旋转的伪元素将圆分成 3 个扇区，然后旋转第一个和最后一个子元素以“填充”圆:

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

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