https://1stwebdesigner.com/free-open-source-css3-checkout-forms/ https://codepen.io/nw/pen/BoGyER <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>波浪边框</title> <style type="text/css"> body { background-color: #9B7272; } .container { font-family: PT Sans, sans-serif; font-size: 18px; width: 80%; min-width: 620px; max-width: 700px; height: 360px; margin: 50px auto; background: #ffe0b1; border-radius: 9px; overflow: hidden; } .icing, .dough { float: left; padding: 20px; box-sizing: border-box; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .icing { width: 33%; position: relative; padding-right: 24px; background: -webkit-linear-gradient(left, #ff94b3 0%, #ffb3c9 80%); background: linear-gradient(to right, #ff94b3 0%, #ffb3c9 80%); color: white; } .icing:before { content: ''; width: 36px; height: 36px; display: block; position: absolute; top: -18px; right: -7.2px; z-index: 1; background: #ffb3c9; border-radius: 50%; box-shadow: 21.81818px 28.8px 0 #ffe0b1, 0 57.6px 0 #ffb3c9, 21.81818px 86.4px 0 #ffe0b1, 0 115.2px 0 #ffb3c9, 21.81818px 144px 0 #ffe0b1, 0 172.8px 0 #ffb3c9, 21.81818px 201.6px 0 #ffe0b1, 0 230.4px 0 #ffb3c9, 21.81818px 259.2px 0 #ffe0b1, 0 288px 0 #ffb3c9, 21.81818px 316.8px 0 #ffe0b1, 0 345.6px 0 #ffb3c9; } .dough { width: 67%; padding-left: 36px; color: #90510E; } </style> </head> <body> <div class="container"> <div class="icing"> </div> <div class="dough"> </div> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 波浪边框 喜欢 (2)or分享 (0)
