波形（或形状？），在CSS3上有边框 [英] Wave (or shape?) with border on CSS3

问题描述

我需要使用CSS3实现波形，我尝试使用CSS3 Shapes实现，但我还没有达到所需的结果。

  * {margin：0; padding：0;} body {background：＃007FC1;}。container，.panel {border-bottom：4px solid＃B4CAD8;}。container {background-color：#fff;}。 .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>这是一个面板< / div>   
 
 
不可能在波形上实现边框和设置背景颜色。 
我需要实现这个结果：
 
 
 
  
解决方案
您可以使用 svg   .panel （ div ）并向右移动。
 
 
 
 > 
 
 
 
 
 
 < pre-class =snippet-code-css lang-css prettyprint-override>  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 =panelwidth =200height =54> < path d =M0,0 h7 q9,3 12.5,10 l13,30 q3.2,10 13,10 h157 v-50zfill =white/> < path transform =translate（0，-0.5）d =M0,2 h7 q10,2 13,10 l13,30 q3,9 13,10 h157fill =nonestroke =＃B4CAD8stroke -width =4/> < text x =110.5y =25text-anchor =middle>这是面板< / 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 optiology perferendis。< / p> < / div>< / div>< svg class =panelwidth =200height =59> < path d =M0,0 h30 q15,0 5,15 l-17,20 q-13,16 5,15 h200 v-58fill =white/> < path transform =translate（0，-0.5）d =M0,2 h30 q15,0 5,15 l-17,20 q-13,16 5,15 h200fill =nonestroke = ＃B4CAD8stroke-width =4/> < text x =115y =30text-anchor =middle>这是面板< / text>< / svg>   

---

有点曲线。

>

< pre-class =snippet-code-css lang-css prettyprint-override> 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 =panelwidth =200height =54> < path d =M0,0 h7 q55，-5 15,35 q-13,16 15,15 h200 v-54fill =white/> < path transform =translate（0，-0.5）d =M0,2 h7 q55，-5 15,35 q-13,16 15,15 h200fill =nonestroke =＃B4CAD8stroke -width =4/> < text x =115y =30text-anchor =middle>这是面板< / 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 =panelwidth =200height =85> < path d =M0,24 a10,7.5 1 1,0 0，-15 q20，-11 40,26fill =＃007FC1/> < path d =M0,22 m0，-15 q40，-10 40,60 q0,15 15,15 h146 v-65fill =white/>< < path d =M0,22 a10,7.5 1 1,0 0，-15 q40，-10 40,60 q0,15 15,15 h146fill =nonestroke =＃B4CAD8stroke-width = 4/> < text x =110.5y =55text-anchor =middle>这是一个面板< / text>< / svg>   

I need to implement a wave shape with CSS3, I tried to implement with CSS3 Shapes, but I has not reached the desired result.

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

It is impossible to implement border and set background color on the wave shape. I need to achieve this result:

解决方案

You could use svg instead of .panel(div) and float it to the right.

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>

---

You could also get a shape other way around.

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>

---

A bit more curvy.

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>

---

How about a real wave shape?

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>

这篇关于波形（或形状？），在CSS3上有边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！