CSS3 / SVG Separator

问题

Im trying make header separator with svg or pure css3 like this: preview from design

In header i have standart bootstrap 4 carousel

<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>

Border radis working fine, but im need little rounded separator in bottom header. Its possible make with css3? Or need svg shape?

回答1:

I hope this is what you are asking: In the next example I'm using clip-path to clip the header. Please note that the path I'm using had a bounding box of 1/1 and clipPathUnits="objectBoundingBox".

MDN quote: This value indicates that all coordinates inside the element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value.

#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>

来源：https://stackoverflow.com/questions/56272762/css3-svg-separator