如何隐藏底部Css答案

【问题标题】：How to hide bottom side Css如何隐藏底部Css
【发布时间】：2021-02-14 08:20:06
【问题描述】：

这是我尝试过的：

 &__ellipse {
        width: 297px;
        height: 297px;
        border-radius: 50%;
        background: $orange;
        position: relative;

        img {
          position: absolute;
          bottom: 0;
          right: 20px;
        }
      }

如何只隐藏底部？像 overflow-bottom: hide 或 clip path 这样的东西

【问题讨论】：

你试过border-radius: 100% ??
分享图片文件
@TemaniAfif ibb.co/P6zHcHP

标签： javascript jquery css sass

【解决方案1】：

我会像下面这样使用蒙版和渐变：

.box {
  margin: auto;
  padding: 0 35px 32px 0; /* to rectify the image position */
  max-width: 200px;
  /* the orange circle with gradient */
  background: radial-gradient(circle closest-side, orange 85%, transparent 86%);
  -webkit-mask: 
    /* show only the orange circle (same as background  */
    radial-gradient(circle closest-side, orange 85%, transparent 86%),
    /* and also show 70% from the top */ 
    linear-gradient(#fff, #fff) top/100% 70% no-repeat; 
}

.box img {
  display: block;
  width: 100%;
}

<div class="box">
  <img src="https://i.stack.imgur.com/8Kjvd.png">
</div>

另一个使用多个背景的版本。更易于管理和响应

.box {
  display:inline-block;
  --grad:radial-gradient(circle closest-side at 50% 58%, orange 97%, transparent 98%);
  background: 
    url(https://i.stack.imgur.com/8Kjvd.png) 0 50%/contain no-repeat, var(--grad);
  -webkit-mask: var(--grad), linear-gradient(#fff, #fff) top/100% 70% no-repeat;
}

.box::before {
  content: "";
  display: block;
  padding-top: 100%;
}

<div class="box" style="width:300px"></div>
<div class="box" style="width:200px"></div>
<div class="box" style="width:100px"></div>

【讨论】：