如何创建凹块？ [复制]

【问题标题】：How to create concave block? [duplicate]如何创建凹块？ [复制]
【发布时间】：2016-01-06 18:35:00
【问题描述】：

如何在背景上创建带有图像的凹块（例如滑块）？我需要什么：

【问题讨论】：

欢迎来到 SO。请访问help center 了解询问内容和方法

标签： html css

【解决方案1】：

我已添加:pseudo 元素以使用border-radius 添加圆形效果

.main {
  display: inline-block;
  text-align: center;
  position: relative;
}
.main img {
  position: relative;
}
.main div {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30%;
  z-index: 0;
}
.main div:after {
  content: '';
  width: 150%;
  left: -25%;
  background: white;
  height: 150%;
  top: -15%;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}

<div class="main">
  <img src="http://placeimg.com/400/300/animals">
  <div>
    Vestibulum ante ipsum primis in
  </div>
</div>

【讨论】：