自定义形状与背景图像

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

像这样的东西:

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

使用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%);
}