带缺口的边框怎么做

我的思路是将它分割成4个部分，再用一个整体包着，具体代码写了下，希望对你有帮助<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> *{margin:0;padding:0} #box{top:100px;left:100px;position:absolute;width:200px;height:200px;} #top{ width:200px;height:140px;border:1px solid black;border-bottom-color: transparent; } #middlel{ width:150px;height:20px;border-left: 1px solid black; } #middler{ width:50px;height:20px;border-bottom:1px solid black;position:absolute;left:152px;top:142px; } #bottom{ width:200px;height:40px;border:1px solid black;border-top-color: transparent; } #text{ padding-left:30px; } </style> </head> <body> <div id="box"> <div id="top"></div> <div id="middlel"></div> <div id="middler"> <span id="text">More>></span> </div> <div id="bottom"></div> </div> </body> </html>

带缺口的边框怎么做

1回答