如何使用 CSS3 和 SVG 创建带边框的波浪形状？-css教程-PHP中文网

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

Linda Hamilton

发布： 2024-11-16 18:59:03

原创

267 人浏览过

How to Create a Wave Shape with a Border Using CSS3 and SVG?

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

尝试使用 Shapes 通过 CSS3 设计波浪形状时，可能不会得到预期的结果由于边框和背景颜色设置的限制，可以实现。为了克服这个问题，请考虑使用 SVG 而不是波形的 div。

实现：

首先创建一个带有底部边框的容器 div。在容器内，放置波形的内容和 SVG。将 SVG 向右浮动。

SVG 设计：

使用路径来定义形状并用白色填充它来制作波浪形状。接下来，创建另一个稍微偏移的路径，以使用描边属性定义边框并将填充设置为透明。

最终执行：

SVG 将与稍微容器化，创造出有边框的波浪形状的错觉。根据需要调整 SVG 的尺寸和位置以匹配所需的设计。

示例代码：

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

登录后复制

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

登录后复制

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