Обрезка части блока

Question

возникла такая проблема, что по макету нужно, чтобы номер имел вокруг себя прозрачную основу.

Answer 1

Это не номер с прозрачной обводкой, а вырез в белом фоне основного блока.

body { counter-reset: number; background: url('https://cdn.pixabay.com/photo/2021/01/13/16/29/snow-5914604_960_720.jpg') center / cover;}

.cutout {
  position: relative;
  margin: 10vh auto;
  width: 500px; height: 608px;
  border-radius: 28px;
  background-image: radial-gradient(circle at -6% 50%, transparent 128px, #fff 129px);
  filter: drop-shadow(0 5px 15px #0002);
}
.cutout::before {
  counter-increment: number;
  content: counter(number);
  position: absolute;
  left: -120px; top: 50%; z-index: 1;
  width: 170px; height: 170px;
  transform: translatey(-50%);
  border-radius: 50%;
  font: bold 90px/170px sans-serif;
  text-align: center;
  color: #fff;
  background-color: #0b7572;
  filter: drop-shadow(0 5px 10px #0001);
}

.double {
  background-image: radial-gradient(circle at -6% 50%, transparent 128px, #fff 129px, #fff 428px, transparent 428px), radial-gradient(circle at 106% 50%, transparent 128px, #fff 129px, #fff 428px, transparent 428px);
}
.quadruple {
  background-image: radial-gradient(circle at -6% 50%, transparent 128px, #fff 129px, #fff 290px, transparent 290px), radial-gradient(circle at 106% 50%, transparent 128px, #fff 129px, #fff 290px, transparent 290px), radial-gradient(circle at 50% -6%, transparent 128px, #fff 129px, #fff 290px, transparent 290px), radial-gradient(circle at 50% 106%, transparent 128px, #fff 129px, #fff 290px, transparent 290px);
}

<div class="cutout"></div>
<div class="cutout double"></div>
<div class="cutout quadruple"></div>

БЛОГ НА HUSL

Обрезка части блока

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