CSS3 / SVG Separator - PullRequest
Новая
       19

CSS3 / SVG Separator

1 голос
/ 23 мая 2019

Я пытаюсь сделать разделитель заголовков с помощью SVG или чистого CSS3, как это: превью от дизайна

В заголовке у меня есть стандартная загрузочная 4 карусель 

<section class="slider">
        <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active" style="background-image:url(images/20180818_STP501.jpg);">
                    <div class="container position-relative h-100">
                        <div class="carousel-container">
                            <div class="carousel-content">
                                <h2>Consectetuer adipiscing elit,<br/>diam nibh euismod tincidunt</h2>
                                <p>Enim ad veniam, ullamcorper<br/>suscipit aliquip commodo</p>
                                <div class="mt-5">
                                    <a href="#">Euismod</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item" style="background-image:url(images/20180818_STP501.jpg);">
                    <div class="container position-relative h-100">
                        <div class="carousel-container">
                            <div class="carousel-content">
                                <h2>Consectetuer adipiscing eli,<br/>diam nibh euismod tincidunt</h2>
                                <p>Enim ad veniam, ullamcorper<br/>suscipit aliquip commodo</p>
                                <div class="mt-5">
                                    <a href="#">Euismod</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </section>

Границы радиуса работают нормально, но им нужен маленький закругленный разделитель в нижнем коллекторе.Его можно сделать с помощью css3?Или нужна форма SVG?

1 Ответ

0 голосов
/ 23 мая 2019

Надеюсь, это то, что вы спрашиваете: в следующем примере я использую clip-path, чтобы обрезать заголовок. Обратите внимание, что используемый мной путь имел ограничивающую рамку 1/1 и clipPathUnits="objectBoundingBox".

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

#header {
  padding: 0;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/castell.jpg);
  background-size: cover;
  height: 50vh;
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);  
}
<svg height="0" width="0" class="svg-clip" style="position:absolute">
    <defs>
         <clipPath id="clip" clipPathUnits="objectBoundingBox">
           <path d="M0,0L0,.5 A.6,.6 0 0 0 1,.5L1,0z" />
        </clipPath>
    </defs>
</svg>
 
<div id="header"></div>
...