<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 900px; height: 50px; background: linear-gradient(-145deg, transparent 11px, #0b2b5f 0) right, linear-gradient(145deg, transparent 11px, #0b2b5f 0) left; background-size: 50% 100%; background-repeat: no-repeat; } </style> </head> <body> <div class="box"></div> </body> </html>
同理一个菱形是
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 900px; height: 50px; background：linear-gradient( -47deg, transparent 34px, #0b2b5f 0) right, linear-gradient( 137deg, transparent 34px, #0b2b5f 0) left;
background-size: 50% 100%; background-repeat: no-repeat; } </style> </head> <body> <div class="box"></div> </body> </html>
原文：https://www.cnblogs.com/mahuablog/p/14595591.html