赞
踩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>内圆角</title> <style type="text/css"> * { margin: 0; padding: 0; } body { /* background: #999; */ padding-top: 50px; } .wrapper { display: flex; position: relative; width: 320px; height: 100px; margin: auto; filter: drop-shadow(2px 2px 3px #999); } .wrapper div { height: 100%; } .wrapper b { position: absolute; right: 30%; top: 5px; height: calc(100% - 10px); border-left: 1px dotted #fff; } .left { background: #58a; background: radial-gradient(circle at top right, transparent 5px, #44C9A1 0) top right ,radial-gradient(circle at bottom right, transparent 5px, #44C9A1 0) bottom right ; background-size: 100% 60%; background-repeat: no-repeat; color: white; width: 70%; border-radius: 5px 0 0 5px; } .right { background: #58a; background: radial-gradient(circle at top left, transparent 5px, #44C9A1 0) top left ,radial-gradient(circle at bottom left, transparent 5px, #44C9A1 0) bottom left ; background-size: 100% 60%; background-repeat: no-repeat; width: 30%; color: white; border-radius: 0 5px 5px 0; } </style> </head> <body> <div class="wrapper"> <div class="left"></div> <b></b> <div class="right"></div> </div> </div> </body> </html>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。