【问题标题】: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>

【讨论】:

    猜你喜欢
    • 2014-03-10
    • 2023-03-21
    • 1970-01-01
    • 1970-01-01
    • 2016-10-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-08-29
    相关资源
    最近更新 更多