如何使用CSS3创建这些形状

Question

我正在创建一个响应式网站。我想在CSS3中创建下面的形状。使用ul li。

Answer 1

你可以使用一个伪元素，并在父容器上设置overflow：hidden set。

＆＃13;

＆＃13;

html {
  margin: 0;
  padding: 0;
  background: #222;
}
.wrap {
  position: relative;
  width: 100%;
  height: 200px;
  background: #222;
  overflow: hidden;
}
.wrap div {
  display: inline-block;
  position: relative;
  height: 100%;
  width: 22%;
  margin-left: 2%;
  background: lightblue;
  transition: all 0.6s;
  line-height:200px;
  text-align:center;
}
.wrap:before {
  content: "";
  position: absolute;
  bottom: -25%;
  left: 0;
  height: 50%;
  width: 100%;
  border-radius: 50%;
  background: #222;
  z-index: 8;
}
div.withImage {
  background: url(http://placekitten.com/g/300/300);
  background-size: 100% 100%;
}
.wrap div:hover:before {
  opacity: 1;
}
.wrap div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: blue;
  opacity: 0;
  transition: all 0.6s;
}

＆＃13;

<div class="wrap">
  <div>ONE</div>
  <div>TWO</div>
  <div>THREE</div>
  <div class="withImage">FOUR</div>
</div>

＆＃13;

＆＃13;

＆＃13;

注

这是使用Divs完成的。我已将其留作OP的练习，以便为ul li更改此代码。

这也可以更改为包含动态添加的元素：JSFIDDLE