Как скрыть нижнюю часть Css?

Question

Вот что я пробовал сделать:

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

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

Как скрыть только нижнюю сторону? Что-то вроде этого overflow-bottom: hide или clip path

_{Свободный перевод вопроса How to hide bottom side Css от участника @Jessica Bulldog.}

Answer 1

Я бы сделал это, как показано ниже, используя маску и градиент:

.box {
  margin: auto;
  padding: 0 35px 32px 0; /* исправить положение изображения */
  max-width: 200px;
  /* оранжевый круг с градиентом */
  background: radial-gradient(circle closest-side, orange 85%, transparent 86%);
  -webkit-mask: 
    /* показывать только оранжевый кружок (как фон) */
    radial-gradient(circle closest-side, orange 85%, transparent 86%),
    /* а также показать 70% сверху */ 
    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>

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 2

.box {
  width: 200px;
  height: 200px;
  background: orange;
  border-radius: 50%;
  position: relative;
  margin: 60px auto 0;
}

.box img {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  border-radius: 0 0 100px 100px;
}

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

Answer 3

Зачем тут лишние элементы, контейнеры, свойства? Всё гораздо проще.

Краткость сестра таланта:

img {
  height: 300px; border-radius: 0% 0 80% 110%; padding: 0px 40px 39px 10px;
  background: radial-gradient(circle at 50% 50%, orange 0, orange 130px, transparent 131px) no-repeat; background-position: 15px 0;
}

<img src="//i.stack.imgur.com/8Kjvd.png">

БЛОГ НА HUSL

Как скрыть нижнюю часть Css?

Ответы (3 шт):