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

查看：19
本文介绍了波浪(或形状?)在 CSS3 上有边框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

* {边距:0；填充:0；}身体 {背景:#007FC1；}.容器，.控制板 {边框底部:4px 实心 #B4CAD8;}.容器 {背景色:#fff;}.container >.文本 {填充:0.5em；}.控制板 {位置:相对；浮动:对；宽度:200px；高度:40px；边距顶部:-4px；背景色:#fff;行高:42px；文本对齐:居中；}.面板:之前{内容: '';位置:绝对；左:-44px；宽度:0；高度:0；边框顶部:44px 实心 #B4CAD8；左边框:44px 实心透明；}

<div class="text"><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.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">这是一个面板</div>

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

解决方案

你可以使用 svg 而不是 .panel(div) 和将其向右浮动.

body {背景:#007FC1；}.容器 {边框底部:4px 实心 #B4CAD8;}.容器 {背景色:#fff;z-索引:-1；}.container >.文本 {填充:0.5em；}.控制板 {位置:相对；浮动:对；边距顶部:-4px；}

<div class="text"><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Voluptates nam fuga eligendi ipsum sed ducimus quia adipisci unde atque enim quasi quidem perspiciatis totam soluta tempora hic voluptatem optio perferendis.

<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">这是一个面板</text></svg>

<小时>

您也可以通过其他方式获得形状.

body {背景:#007FC1；}.容器 {边框底部:4px 实心 #B4CAD8;}.容器 {背景色:#fff;z-索引:-1；}.container >.文本 {填充:0.5em；}.控制板 {位置:相对；浮动:对；边距顶部:-4px；}

<div class="text"><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Voluptates nam fuga eligendi ipsum sed ducimus quia adipisci unde atque enim quasi quidem perspiciatis totam soluta tempora hic voluptatem optio perferendis.

<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">这是一个面板</text></svg>

<小时>

有点弯曲.

body {背景:#007FC1；}.容器 {边框底部:4px 实心 #B4CAD8;}.容器 {背景色:#fff;z-索引:-1；}.container >.文本 {填充:0.5em；}.控制板 {位置:相对；浮动:对；边距顶部:-4px；}

<div class="text"><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Voluptates nam fuga eligendi ipsum sed ducimus quia adipisci unde atque enim quasi quidem perspiciatis totam soluta tempora hic voluptatem optio perferendis.

<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">这是一个面板</text></svg>

<小时>

真正的波形怎么样?

body {背景:#007FC1；}.容器 {边框底部:4px 实心 #B4CAD8;}.容器 {背景色:#fff;z-索引:-1；}.container >.文本 {填充:0.5em；}.控制板 {位置:相对；浮动:对；边距顶部:-24px；}

<div class="text"><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英.Voluptates nam fuga eligendi ipsum sed ducimus quia adipisci unde atque enim quasi quidem perspiciatis totam soluta tempora hic voluptatem optio perferendis.

<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">这是一个面板</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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆