Question

我怎么能得到一个看起来像这样的div： Arabesque Shape使用css？它会是三角形和圆形的混合吗？我不太确定。

Answer 1

创建可点击的小屋的简单方法是使用 svg图像。

Guide to change the style of an SVG when you click on it

a:focus {
  fill: pink;
  stroke: red;
  stroke-width: 1;
}

<svg viewBox="0 0 95 50">
  <a xlink:href="#0">
    <circle cx="20" cy="25" r="5" data-Name="shape 1" data-tabindex="0" />
  </a>
  <a xlink:href="#0">
    <circle cx="40" cy="25" r="5" data-Name="shape 2" data-tabindex="0" />
  </a>
  <a xlink:href="#0">
    <circle cx="60" cy="25" r="5" data-Name="shape 3" data-tabindex="0" />
  </a>
  <a xlink:href="#0">
    <circle cx="80" cy="25" r="5" data-Name="shape 4" data-tabindex="0" />
  </a>
</svg>

该指南引用了其他"similar" stackoverflow question

当然，这个元素不是“div”，但我想你想点击或着色这个可以用SVG做的形状。

Answer 2

你可以这样做但我同意其他方法，而不只是使用一堆div。

标记：

<div class="shape-wrapper">
  <div class="shape-square"></div>
  <div class="shape-circle circle-top-left"></div>
  <div class="shape-circle circle-top-right"></div>
  <div class="shape-circle circle-bottom-left"></div>
  <div class="shape-circle circle-bottom-right"></div>
</div>

CSS：

.shape-wrapper {
  width: 200px;
  height: 200px;
  background-color: white;
  position: relative;
}
.shape-wrapper div {
  background-color: red;
  position: absolute;
}
.shape-square {
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.shape-circle {
  width: 60%;
  height: 60%;
  -webkit-border-radius: 60%;
  -moz-border-radius: 60%;
  border-radius: 60%;
}

.circle-top-left {
  top: 0;
  left: 0;
}
.circle-top-left {
  top: 0;
  left: 0;
}
.circle-top-right {
  top: 0;
  right: 0;
}
.circle-bottom-left {
  bottom: 0;
  left: 0;
}
.circle-bottom-right {
  bottom: 0;
  right: 0;
}

将Div设计为复杂形状

2 个答案: