css - 将 Div 样式化为复杂的形状

Question

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

Answer 1

你可以这样做，但我同意其他不使用一堆 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;
}