波形（或形状？），在CSS3上有边框

本文介绍了波形（或形状？），在CSS3上有边框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我需要使用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 ）并向右移动。 > 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> 有点曲线。 > 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上有边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！