css - 在 CSS3 上带有边框的波浪(或形状？)

Question

我需要用 CSS3 实现一个波形，我尝试用 CSS3 Shapes 实现，但没有达到预期的结果。

* {
  margin: 0;
  padding: 0;
}
body {
  background: #007FC1;
}
.container,
.panel {
  border-bottom: 4px solid #B4CAD8;
}
.container {
  background-color: #fff;
}
.container > .text {
  padding: 0.5em;
}
.panel {
  position: relative;
  float: right;
  width: 200px;
  height: 40px;
  margin-top: -4px;
  background-color: #fff;
  line-height: 42px;
  text-align: center;
}
.panel:before {
  content: '';
  position: absolute;
  left: -44px;
  width: 0;
  height: 0;
  border-top: 44px solid #B4CAD8;
  border-left: 44px solid transparent;
}

<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>
<div class="panel">this is a panel</div>

无法在波形上实现边框和设置背景色。我需要达到这个结果:

Answer 1

您可以使用 svg 而不是 .panel(div) 并将其 float 到右侧。

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

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

<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="59">
  <path d="M0,0 h30 q15,0 5,15 l-17,20 q-13,16 5,15 h200 v-58" fill="white" />
  <path transform="translate(0, -0.5)" d="M0,2 h30 q15,0 5,15 l-17,20 q-13,16 5,15 h200" fill="none" stroke="#B4CAD8" stroke-width="4" />
  <text x="115" y="30" text-anchor="middle">This is a panel</text>
</svg>

---

有点 flex 。

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

<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 q55,-5 15,35 q-13,16 15,15 h200 v-54" fill="white" />
  <path transform="translate(0, -0.5)" d="M0,2 h7 q55,-5 15,35 q-13,16 15,15 h200" fill="none" stroke="#B4CAD8" stroke-width="4" />
  <text x="115" y="30" 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: -24px;
}

<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="85">
  <path d="M0,24 a10,7.5 1 1,0 0,-15 q20,-11 40,26" fill="#007FC1" />
  <path d="M0,22 m0,-15 q40,-10 40,60 q0,15 15,15 h146 v-65" fill="white" />
  <path d="M0,22 a10,7.5 1 1,0 0,-15 q40,-10 40,60 q0,15 15,15 h146" fill="none" stroke="#B4CAD8" stroke-width="4" />
  <text x="110.5" y="55" text-anchor="middle">This is a panel</text>
</svg>