如何使用 SVG 和 CSS 创建带边框的波浪形状？

在 CSS3 中创建带边框的波浪形状

在 CSS3 中设计带边框的波浪形状可能具有挑战性。使用 CSS3 Shapes 实现它们可能不会产生预期的结果。相反，SVG 和 CSS 定位的组合可以达到预期的效果。

使用 SVG 表示波形

而不是使用 div 元素表示波形，可以使用 SVG 元素。 SVG 中的路径元素可用于定义波浪的形状。 fill 属性可以设置为白色，为波形提供纯色。

为波形添加边框

要创建边框，另一个路径元素可以添加到 SVG 中。该路径的形状应与波浪形状相同，但应稍小一些。 fill 属性应设置为 none，并且描边和描边宽度属性应用于定义边框。

定位波形

SVG 元素可以使用CSS定位。 float 属性可用于将 SVG 浮动到内容的右侧。 margin-top 属性可用于将 SVG 定位在内容稍上方。

最终代码

以下代码演示了带边框的波浪形状的实现使用 SVG 和 CSS：

<div class="container">
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nam fuga eligendi ipsum sed ducimus quia adipisci unde atque enim quasi quidem perspiciatis totam soluta tempora hic voluptatem optio perferendis.</p>
  </div>
</div>
<svg class="panel" width="200" height="54">
  <path d="M0,0 h7 q9,3 12.5,10 l13,30 q3.2,10 13,10 h157 v-50z" fill="white" />
  <path transform="translate(0, -0.5)" d="M0,2 h7 q10,2 13,10 l13,30 q3,9 13,10 h157" fill="none" stroke="#B4CAD8" stroke-width="4" />
  <text x="110.5" y="25" text-anchor="middle">This is a panel</text>
</svg>

body {
  background: #007FC1;
}
.container {
  border-bottom: 4px solid #B4CAD8;
}
.container {
  background-color: #fff;
  z-index: -1;
}
.container > .text {
  padding: 0.5em;
}
.panel {
  position: relative;
  float: right;
  margin-top: -4px;
}

此方法使用 SVG 创建自定义波形，然后在其上分层边框在它的顶部使用一个附加的路径元素。使用 CSS 定位波形即可完成所需的结果。

以上是如何使用 SVG 和 CSS 创建带边框的波浪形状？的详细内容。更多信息请关注PHP中文网其他相关文章！