gpt4 book ai didi

css - 在 CSS3 上带有边框的波浪(或形状?)

转载 作者:技术小花猫 更新时间:2023-10-29 10:27:24 30 4
gpt4 key购买 nike

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

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

wave shape with border

最佳答案

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

enter image description here

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>


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

enter image description here

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>


有点 flex 。

enter image description here

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>


真正的波形怎么样?

enter image description here

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>

关于css - 在 CSS3 上带有边框的波浪(或形状?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27777470/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com