在CSS3上边框的波(或形状？)

我需要用 CSS3实现波形,我试图用 CSS3形状实现,但是我还没有达到预期的结果.

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

在波形上实现边框和设置背景颜色是不可能的.
我需要实现这个结果：

解决方法

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

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,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,2 h30 q15,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: -4px;
}

<div class="container">
  <div class="text">
    <p>Lorem ipsum dolor sit amet,0 h7 q55,-5 15,35 q-13,16 15,15 h200 v-54" fill="white" />
  <path transform="translate(0,2 h7 q55,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,15 h146" fill="none" stroke="#B4CAD8" stroke-width="4" />
  <text x="110.5" y="55" text-anchor="middle">This is a panel</text>
</svg>

原文地址：https://www.jb51.cc/css/216597.html