Как обернуть изображение в круг css, чтобы верхняя часть была вне круга

Рейтинг: 0Ответов: 2Опубликовано: 13.01.2023

Есть круг в нём находится картинка, нужно в css низ картинки сделать под кругом, верх картинки сделать вне круга. Изображение приложил. Заранее спасибопример

css html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

доп обертку добавить поверх

.cilcle__wrap {
  overflow: hidden;
  padding-top: 20px;
}

.cilcle__circle {
  width: 190px;
  height: 190px;
  background: red;
  position: relative;
}

.cilcle__piople {
  height: 280px;
  width: 50px;
  background: rgb(2,0,36);
  background: linear-gradient(173deg, rgba(2,0,36,1) 0%, rgba(9,121,99,1) 30%, rgba(0,212,255,1) 100%);
  position: absolute;
  z-index: 1;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}
<div class="cilcle__wrap">
  <div class="cilcle__circle">
    <div class="cilcle__piople"></div>
  </div>
</div>

▲ 0

Вы так хотели?

.circle-wrapper {
  overflow: hidden;
  padding-top: 2em;
  border-radius: 0 0 74px 74px;
  display: inline-block;
}

.circle {
  width: 150px;
  height: 150px;
  background-image: radial-gradient(rgb(174, 12, 31) 40%, rgb(229, 15, 45) 60%);
  border-radius: 50%;
  position: relative;
  border: 1px solid rgb(0, 0, 0);
}

.circle-image {
  filter: drop-shadow(10px -10px 7px rgba(0, 0, 0, .45));
  width: 125px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div class="circle-wrapper">
  <div class="circle">
    <img class="circle-image" src="https://upload.wikimedia.org/wikipedia/ru/4/43/Elmo.png">
  </div>
</div>