3

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

&__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.

1

3 ответа 3

3

.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.sstatic.net/8Kjvd.png">
</div>

2

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

.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.sstatic.net/8Kjvd.png">
</div>

Другая версия с использованием нескольких фонов. Легче управлять и быстрее реагировать

.box {
  display:inline-block;
  --grad:radial-gradient(circle closest-side at 50% 58%, orange 97%, transparent 98%);
  background: 
    url(https://i.sstatic.net/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.

2

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

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

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.sstatic.net/8Kjvd.png">

2
  • справедливости ради внешний вид результата не соответствует образцу. Оранжевый Фон явно не круглый и справой стороны обрезан неровно- район плеча, волос Commented 27 мар. 2021 в 20:19
  • 1
    согласись, так выглядит лучше и ближе к оригиналу. А плюсик, я тебе уже поставил вчера. Commented 28 мар. 2021 в 9:39

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.