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.stack.imgur.com/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.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.

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.stack.imgur.com/8Kjvd.png">

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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