在 CSS3 上带有边框的波浪（或形状？）答案

【问题标题】：Wave (or shape?) with border on CSS3在 CSS3 上带有边框的波浪（或形状？）
【发布时间】：2017-06-13 00:10:29
【问题描述】：

我需要用 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>

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

【问题讨论】：

为什么不使用伪：之后并将图像附加到您想要的位置？ - 看起来更简单，更兼容旧版浏览器 - 而 CSS-shapes 与旧版浏览器不兼容，因为它不是一个成熟的标准 [caniuse.com/#feat=css-shapes]
你试过 HTML5 SVG 吗？

标签： css svg css-shapes

【解决方案1】：

您可以使用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,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>

有点弯曲。

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>

【讨论】：

aaaah 这就是我喜欢 SO 的原因。总是有不同的方式来看待同一个问题（我在考虑类似标签的结构），你在考虑面板类型的！ :)
@Downvoter - 请解释拒绝投票的原因，以便我改进？还是仅仅因为你讨厌svg？
你今天一定惹恼了某人，因为这可能是这个问题的最佳选择。
@jbutler483 - 我知道是对的。可能只是一些人在here 失败后讨厌我。或者可能投反对票的人嫉妒，因为他不知道如何使用svg。 :p
但是，但是.. 我不知道怎么做？ :L 但是，是的，这很糟糕（顺便说一句，为链接欢呼）。只是表明 SO 不喜欢当“好”、“有经验”的用户发布高水平/只能解决问题的问题时。

【解决方案2】：

这是一种使用 CSS 实现波形的方法。（这只是说明如何使用 CSS 实现它，但 SVG 仍然是推荐使用的工具。）

底座是一个div，它是一个白色的矩形框。在方框中，底部 50px 为透明色，之后的 3px 为浅蓝色，其余为白色。这使它看起来像上半部分是一个带有浅蓝色边框的白色矩形。底部透明的 50 像素部分有助于使剪切区域看起来好像不是容器的一部分。
伪元素被倾斜并定位在父容器的右下角以产生弯曲的效果。它们还添加了一些框阴影来生成边框。
使用单独的div 添加内容，并再次定位在父级的右下角。

.content {
  position: relative;
  height: 150px;
  padding: 10px;
  background: linear-gradient(270deg, transparent 200px, lightblue 200px) no-repeat, linear-gradient(0deg, transparent 50px, white 50px);
  background-position: 100% 117px, 100% 100%;
  background-size: 100% 3px, 100% 100%;
  overflow: hidden;
}
.content:before {
  position: absolute;
  content: '';
  height: 25px;
  width: 50px;
  bottom: 25px;
  right: 170px;
  background: transparent;
  border-top-right-radius: 18px;
  box-shadow: 4px -3px 0px lightblue, 4px 0px 0px lightblue, 20px 0px 0px white;
  transform: skew(30deg);
  z-index: 2;
}
.content:after {
  position: absolute;
  content: '';
  right: 0px;
  bottom: 0px;
  height: 50px;
  width: 177px;
  background: white;
  border-bottom-left-radius: 18px;
  box-shadow: inset 4px -3px 0px lightblue;
  transform-origin: right top;
  transform: skew(30deg);
}
.panel {
  position: absolute;
  bottom: 3px;
  right: 0px;
  height: 50px;
  width: 135px;
  line-height: 50px;
  z-index: 3;
}


/* just for demo */
body {
  background: linear-gradient(90deg, crimson, indianred, purple);
  font-family: Calibri;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='content'>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
  <div class='panel'>This is a panel</div>
</div>

Here 是具有透明背景的容器版本（而不是白色）。

使用旋转变换的旧版本：

底座是一个div，它是一个带有白色背景和inset浅蓝色阴影的白色矩形框。
使用伪元素为右侧（具有“这是面板”文本）创建了一小部分，并且绝对定位在父div 的右上角。这个伪元素的内容是使用data-content 属性设置的。此框左下角的弯角是使用border-radius 实现的。
从父div底部到面板伪元素底部的弯曲区域是另一个伪元素，它是根据需要绝对创建和定位的。它还使用box-shadow 生成浅蓝色线条，同时其背景与身体背景融合。使用transforms 旋转这个伪元素以实现倾斜效果。

body {
  background: #007FC1;
  font-family: Calibri;
}
div {
  position: relative;
  height: 100px;
  width: auto;
  padding-top: 10px;
  padding-left: 10px;
  background: white;
  box-shadow: inset 0px -3px 0px lightblue;
}
div:after {
  position: absolute;
  content: attr(data-content);
  right: 0px;
  padding-left: 20px;
  bottom: -47px;
  height: 50px;
  width: 145px;
  line-height: 40px;
  background: white;
  border-bottom-left-radius: 7px;
  box-shadow: inset 1px -3px 0px lightblue;
}
div:before {
  content: '';
  position: absolute;
  right: 179.5px;
  bottom: -48px;
  height: 57px;
  width: 7px;
  background: transparent;
  border-top-right-radius: 6px;
  box-shadow: inset -3px 2px 1px lightblue, 16px -10px 0px 11px white;
  transform: rotateZ(-36deg);
  z-index: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div data-content="This is a panel">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</div>

使用倾斜变换的示例：

感谢 web-tiki 这个想法。也可以使用skew 转换代替rotate 来完成与上述相同的操作，如下例所示。

body {
  background: #007FC1;
  font-family: Calibri;
}
div {
  position: relative;
  height: 100px;
  width: auto;
  padding-top: 10px;
  padding-left: 10px;
  background: white;
  box-shadow: inset 0px -3px 0px lightblue;
}
div:after {
  position: absolute;
  content: attr(data-content);
  right: 0px;
  padding-left: 15px;
  bottom: -47px;
  height: 50px;
  width: 150px;
  line-height: 40px;
  background: white;
  border-bottom-left-radius: 10px;
  box-shadow: inset 2px -3px 1px lightblue, 2px 1px 2px #007FC1;
}
div:before {
  position: absolute;
  content: '';
  right: 174px;
  bottom: -44px;
  height: 47px;
  width: 15px;
  background: transparent;
  border-top-right-radius: 4px;
  box-shadow: inset -4px 3px 1px lightblue, 20px -10px 0px 6px white;
  z-index: 2;
  transform: skew(33deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div data-content="This is a panel">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</div>

【讨论】：

【解决方案3】：

仅 CSS 解决方案

按照您的要求，我只制作了形状。使用定位将其添加到页面非常简单。对于这样的任务，使用 CSS 不太实用。我浪费了大约 15-20 分钟来制作一个简单的形状！在这种情况下，SVG 更可取。但既然可以做到，那么必须做到。这里：

body{
    margin:0;
    padding:0;
}
#one{
    position:absolute;
    top:30px;
    left:-30px;
    height:10px;
    width:10px;
}
#one > span{
    position:relative;
    top:-215px;
    left:300px;
    text-align:center;
    width:300px;
    height:80px;
    display:block;
    line-height:80px;
    z-index:4;
}
.one{ 
    position: relative;
    height: 90px; 
    width: 300px; 
    background-color: #007FC1; 
    border-radius: 25px; 
    -webkit-transform: skew(30deg); 
    transform: skew(30deg);
    z-index:2;
}
.obefore {
    height:35px;
    width:60px;
    position:relative;
    top:-35px;
    left:290px;
    background-color: #007FC1;
    -webkit-transform: skew(30deg); 
    transform: skew(30deg);
    z-index:1;
}
.oafter{
    position: relative;
    top: -135px;
    left:310px;
    height: 90px; 
    width: 300px; 
    background-color: white; 
    border-bottom-left-radius: 25px;
    -webkit-transform: skew(30deg); 
    transform: skew(30deg);
    z-index:3;
}
#two{
    position:absolute;
    top:20px;
    left:-20px;
}
.two{ 
    position: relative;
    height: 90px; 
    width: 300px; 
    background-color: #B4CAD8; 
    border-radius: 25px; 
    -webkit-transform: skew(30deg); 
    transform: skew(30deg);
    z-index:0;
}
.tafter{
    position: relative;
    top: -80px;
    left:290px;
    height: 90px; 
    width: 300px;
    background-color: #B4CAD8; 
    border-top-left-radius: 45px;
    border-bottom-left-radius: 25px;
    -webkit-transform: skew(30deg); 
    transform: skew(30deg);
    z-index:2;
}

<div id="one">
<div class="one"></div>
<div class="obefore"></div>
<div class="oafter"></div>
    <span>This is a Panel.</span>
</div>
<div id="two">
<div class="two"></div>
<div class="tbefore"></div>
<div class="tafter"></div>
</div>

请不要嘲笑我的加价。我使用了伪pseudo-elements（即普通元素。）。 Z-index 对pseudo-elements 有一些限制，所以我改用了div。

【讨论】：

谢谢！ @哈利。我认为 SVG 在这方面要好得多。例如，请参阅chipChocolate 的回答。 CSS 中的复杂形状太过分了！但正如 OP 在 CSS 中所问的那样。
这几乎是 mate。 CSS 不是为此类目的而设计的。

【解决方案4】：

使用两个元素来创建波浪：

html,body{background:black;}

.wave{
height:40px;
  width:100%;
   transform:skewX(30deg); 
  background:blue;
  border-top:5px solid lightblue;
  border-right:5px solid lightblue;
  margin-left:-20%;
  position:relative;
  border-radius:5px;
}

.wave:before{
  position:absolute;
  content:"";
  height:100%;
  width:20%;
  background:transparent;
  right:-20%;
  top:-5px; 
  border-radius:5px;
  border-bottom:5px solid lightblue;
}

.wave:after{
  position:absolute;
  content:"";
  height:5px;
  width:5px;
  background:black;
  right:-1.65%;
  bottom:4px; 
  border-radius:50%;
}

&lt;div class="wave"&gt;&lt;/div&gt;

在这种情况下，我使用了两个嵌套在包装元素中的元素来实现这一点：

.wrap {
  position: relative;
  height: 400px;
  width: 100%;
  margin: 0 auto;
  max-width: 1024px;
}
.shape {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
  z-index: 10;
}
.shape:after {
  content: "";
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: 90%;
  border-radius: 0 50% 0 0;
  box-shadow: 0 0 0 999px lightgray;
}
.shape2 {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 50%;
  background: lightgray;
  border-radius: 0 0 0 50%;
  z-index: 10;
}
/*demo only*/

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  vertical-align: top;
  overflow: hidden;
  background: rgb(79, 79, 79);
  background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
}

<div class="wrap">
  <div class="shape"></div>
  <div class="shape2"></div>
</div>

由单个元素制成

这实际上可以用一个元素来制作，我创建了一个 sn-p 来显示如下：

div {
  height: 50px;
  width: 100%;
  background: lightgray;
  position: relative;
  border-bottom: 5px solid tomato;
}
div:before {
  content: "";
  position: absolute;
  bottom: -30px;
  right: 0;
  width: 40%;
  height: 20px;
  background: lightgray;
  border: 5px solid transparent;
  border-left-color: tomato;
  border-bottom: inherit;
  border-radius: 0 0 0 20px;
}
div:after {
  content: "";
  position: absolute;
  top: 100%;
  right: calc(40% + 5px);
  height: 20px;
  width: 20px;
  border: 5px solid transparent;
  border-top-color: tomato;
  border-radius: 50%;
  transform: rotate(45deg);
  box-shadow: 0px -30px 0 4px lightgray;
}

/*For Demo only*/

html, body {
    margin:0;
    padding:0;height:100%;
    vertical-align:top;overflow:hidden;
    background: rgb(79, 79, 79);
    background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

不是我需要的。定义边界和平滑过渡，还有哪些其他选项？
我修改后的编辑可能是更好的选择（如果您正在寻找我正在考虑的功能）

【解决方案5】：

帖子How to get this shape in CSS not in SVG的形状：

#shape {
  width:210px;
}
#left {
  border-bottom: 5px solid black;
  border-right: 5px solid black;
  border-bottom-right-radius: 70px;
  background-color: white;
  width: 40px;
  height: 80px;
  float: left;
  margin-top: 65px;
  z-index: 1;
  position: relative;                
}
#right {
  border-left:5px solid black;
  border-top:5px solid black;
  border-top-left-radius:70px;
  margin-left: -5px;
  width:30px;
  height:100px;
  float:left;
  background-color:yellow;    
  width: 165px;                    
}
#bottom {
  width:205px;
  height:50px;
  background-color:yellow;
  border-left:5px solid black;
  clear:both;
}
#middle {
  height: 45px;
  width: 205px;
  background-color: yellow;
  top: 105px;
  position: relative;
  z-index: 0;
  border-left: 5px solid black;
}

<div id="shape">
  <div id="left"></div>
  <div id="right"></div>
  <div id="middle"></div>
  <div id="bottom"></div>
</div>

【讨论】：