CSS3/SVG分隔符 [英] CSS3 / SVG Separator

问题描述

我正在尝试使用svg或纯css3制作标头分隔符，如下所示: 设计预览

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

在标题中，我有标准的Bootstrap 4轮播

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>

边界半径工作正常，但在底部标头中几乎不需要圆形的分隔符.它可能用css3做吗?还是需要svg形状?

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

推荐答案

我希望这是您要问的:在下一个示例中，我使用clip-path裁剪标题.请注意，我使用的路径的边界框为1/1和clipPathUnits="objectBoundingBox".

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报价:此值表示元素内的所有坐标都相对于应用了剪切路径的元素的边界框.这意味着坐标系的原点是对象边界框的左上角，并且对象边界框的宽度和高度被认为具有1个单位值的长度.

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>

这篇关于CSS3/SVG分隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！