【问题标题】:how to deform element from top and bottom如何从顶部和底部变形元素
【发布时间】:2021-12-24 01:38:16
【问题描述】:

css 中是否有任何方法可以使元素从顶部和底部变形,如下图所示?我不想为此使用background-image

【问题讨论】:

标签: html css


【解决方案1】:

.box {
  background: #363742;
  position: relative;
  overflow: hidden;
  height: 200px;
}

.box:before,
.box:after {
  border-radius: 1000px / 50px;
  position: absolute;
  background: #fff;
  height: 80px;
  content: '';
  right: -50px;
  left: -50px;
  top: -50px;
}

.box:after {
  bottom: -50px;
  top: auto;
}
<div class="box"></div>

【讨论】:

  • 非常好 - 比我的回答好!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-11-26
  • 2021-03-30
  • 2012-07-23
  • 2011-04-11
相关资源
最近更新 更多