自定义形状与背景图像

Question

我想在我的导航栏菜单中间创建一个半圆形的水平矩形.除此之外,所有这些形状必须具有背景图像.

像这样的东西:

实现这一目标的最佳方法是什么？

Answer 1

使用SVG :( ^推荐)

创建这样的形状的最佳工具是SVG而不是CSS.SVG是可扩展的(对响应式设计非常有用),它们允许我们更好地控制形状方面 - 如圆形或椭圆的斜率/曲率,也可以将图像或渐变作为填充(背景),如下图所示.

使用SVG绘制形状非常容易.只需使用path元素以及move(M),arc(A),line(L)和close-path(z)等命令.绘制形状后,将图像应用为其fill使用pattern和image元素.该xlink:href属性指的是图像的来源.

以下是上述命令的简短说明.可在此MDN页面中找到详细说明:

• M - 将笔移动到命令后立即给出的坐标指定的点.
• A - 绘制具有指定X和Y半径的圆弧,结束于命令后指定的点.
• L - 从一个指定点到另一个指定一条直线.
• z - 通过从路径的最后一个点到第一个点绘制一条直线来关闭路径.

path {
  fill: url(#g-image);
}
body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<svg viewBox='0 0 500 60' preserveAspectRatio='none'>
  <defs>
    <pattern id="g-image" width="1" height="1" patternUnits="objectBoundingBox">
      <image xlink:href="http://lorempixel.com/500/60/abstract/6" width="500" height="60" />
    </pattern>
  </defs>
  <path d='M0,0 0,25 205,25 A50,50 0 0,0 295,25 L500,25 500,0z' />
</svg>

使用剪辑路径:

另一种替代方法是使用a clip-path但不能使用它的纯CSS版本,因为(a)它只能创建简单/基本形状而不是我们需要的路径和(b)它在Firefox中不起作用.因此,我们将不得不使用clip-path如下所示的内联SVG元素.

使用的缺点clip-path是,即使使用内联SVG元素,这也不适用于IE.

div {
  height: 75px;
  width: 600px;
  background: url(http://lorempixel.com/500/100/abstract/6);
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}
body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<svg width='0' height='0'>
  <defs>
    <clipPath id='clipper' clipPathUnits='objectBoundingBox'>
      <path d='M0,0 0,.42 .41,.42 A.1,.83 0 0,0 .59,.42 L1,.42 1,0z' />
    </clipPath>
  </defs>
</svg>
<div></div>

使用CSS掩码:

目前不支持此选项,因为它的浏览器支持较差,但是当所有浏览器都开始支持它时,这是一个非常好的选择.在这种方法中,我们创建一个radial-gradient基于蒙版的蒙版,除了圆弧区域之外,它还会切除图像的底部.由于梯度可以采用固定像素值作为圆形切割的X和Y轴的半径,因此即使图像被拉伸以响应,该弧形区域的长度也不会增加.

div {
  height: 100px;
  width: 100%;
  background: url(http://lorempixel.com/600/100/abstract/6);
  -webkit-mask-image: linear-gradient(to right, white, white), radial-gradient(145px 145px at 50% -25px, white 50%, transparent 51%);
  -webkit-mask-position: 0% 0%, 0% 100%;
  -webkit-mask-size: 100% 50%;
  -webkit-mask-repeat: no-repeat;
}

<div></div>