是否有更好的方法在元素上创建凸/凹边界 [英] Is there a better way to create convex / concave borders on an element

问题描述

我已经重新创建了这个

.container {
  display: flex;
  flex-direction: column;
  background: rgb(167, 180, 182);
  width: 202px;
}

.top {
  width: 200px;
  height: 100px;
  background: rgb(167, 180, 182);
  border-radius: 0 0 28px 0;
  position: relative;
  z-index: 10;
  filter: drop-shadow(0px 4px 9px rgba(87, 101, 104, 0.4));
}
.bottom {
  width: 200px;
  height: 100px;
  background: rgb(167, 180, 182);
  position: relative;
}

.rounded-bottom {
  overflow: hidden;
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 30px;
  height: 30px;
}
.rounded-bottom__in {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  box-shadow: 0 0 0 500px rgb(167, 180, 182);
}

<div class="container">
  <div class="top">
    <div class="rounded-bottom">
      <div class="rounded-bottom__in"></div>
    </div>
  </div>
  <div class="bottom"></div>
   </div>

现在这行得通了，我只是想知道是否有更好的方法可以做到这一点.

now this works, I'm just wondering if there is a better way to do this.

任何帮助将不胜感激

推荐答案

边界半径，径向渐变和滤镜可以做到:

Border radius, radial gradient and a filter can do it:

.box {
  width:200px;
  height:200px;
  background:#9baaad;
  position:relative;
  border-bottom-right-radius:50px; /* convexe part */
  filter:drop-shadow(0px 3px 3px grey); /* shadow */
}
/* concave part */
.box::before{
  content:"";
  position:absolute;
  top:100%;
  right:0;
  left:0;
  height:50px;
  background:
    radial-gradient(farthest-side at bottom right,transparent 98%,#9baaad 100%) 
    0/50px no-repeat;
}

<div class="box">

</div>

这篇关于是否有更好的方法在元素上创建凸/凹边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！