CSS, обрезать внутренний круг к изображению - PullRequest
Новая
       7

CSS, обрезать внутренний круг к изображению

0 голосов
/ 25 января 2019

Я пытаюсь использовать «путь обрезки» на изображении с закругленной нижней частью. Я пытаюсь с путями клипа SVG, но разрез это внешний круг, я не знаю, лучший ли это подход, потому что клип внешний, а не внутренний, что вы порекомендуете для достижения этой цели?

Я хочу добиться этого ->

Это кодовый блок, где я пытаюсь его сделать: 

.section-test {
  padding: 25px 0;
  background-image: url(https://res.cloudinary.com/ddioeulgw/image/upload/v1548437500/test/hero.png);
  background-size: cover;
  height: 85vh;
  clip-path: ellipse(85% 100% at 50% 0%);
}
<section class="section-test">

</section>

https://codepen.io/kenmarquez-the-typescripter/pen/ombege

Я хочу достичь этого ->

1 Ответ

0 голосов
/ 25 января 2019

Вот как я бы это сделал: я бы использовал элемент SVG. ClipPath имеет clipPathUnits="objectBoundingBox", а путь имеет все значения в диапазоне от 0 до 1. 

svg{position:absolute}
.section-test {
  padding: 25px 0;
  background-image: url(https://res.cloudinary.com/ddioeulgw/image/upload/v1548437500/test/hero.png);
  background-size: cover;
  height: 85vh;
  clip-path: url(#clip); 
  }
<svg height="0" width="0" >
    <defs>
         <clipPath id="clip" clipPathUnits="objectBoundingBox">
           <path d="M0,0 L0,.5 A1,1 0 0  1 1,.5 L1,0 0,0" />
        </clipPath>
    </defs>
</svg>
 
<section class="section-test">
</section>

Надеюсь, это поможет.

clipPathUnits = "objectBoundingBox" : Это значение указывает, что все координаты внутри элемента относятся к ограничительной рамке элемента, к которому применяется путь отсечения. Это означает, что источником системы координат является верхний левый угол ограничивающего прямоугольника объекта, а ширина и высота ограничивающего прямоугольника объекта имеют длину, равную единице значения.

MDN цитата

...