css 绘制三角形和斜边
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .module{ position:relative; width:200px; height:100px; text-align:center; line-height:100px; background:#fc0;} /* .module:before{ display:block; content:''; position:absolute; width:0; height:0; border-left:30px solid #fc0; border-top:30px solid #fff; right:0; top:0; background:transparent;} */ .module:after{ display:block; content:''; position:absolute; width:0; height:0; border-left:30px solid #fff ; border-top:30px solid #fc0; left:0; bottom:0; background:#fc0;} .module:before { display: block; content: ''; position: absolute; width: 0; height: 0; border-right: 30px solid #fff; border-top: 30px solid #fc0; right: 0; bottom: 0; background: transparent; } .box { display: flex; width: 100%; height: 60px; border: 1px solid #ccc; } .title { width: 180px; height: 60px; border-bottom: 1px solid blue; margin-left: 20px; position: relative; } .title::before{ display:block; content:''; width: 28px; border-bottom: 1px solid blue; position: absolute; bottom: 9px; left: -24px; transform: rotate(45deg); } .title::after{ display:block; content:''; width: 28px; border-bottom: 1px solid blue; /* background: blue; */ position: absolute; bottom: 9px; right: -24px; transform: rotate(-45deg); } .searchContainer { width: calc(100% - 220px); height: 41px; border-bottom: 1px solid blue; margin-left: 20px; } .triangle-up { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid red; margin-bottom: 20px; } .triangle-down { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid red; } </style> </head> <body> <div class="module">盒子</div> <div class="box"> <div class="title"></div> <div class="searchContainer">333</div> </div> <div class="triangle-up"></div> <div class="triangle-down"></div> </body> </html>
如下图
![](https://img2022.cnblogs.com/blog/1474261/202204/1474261-20220411180348476-147349280.png)