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