图片的实现：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>占比</title> </head> <style type="text/css"> .bgF{ height: 12px; background-color: #7299CF; border-radius: 10px 0 0 10px; width:50%; } .bgBar{ height: 12px; background-color: #DB7272; margin: auto; border-radius: 10px; display: flex; overflow: hidden; } .line{ width: 4px; height: 12px; background: #fff; -webkit-transform: skew(30deg); transform: skew(30deg); } .bgL{ margin-left: -10px; width: 15px; height: 12px; background: #7299CF; -webkit-transform: skew(30deg); transform: skew(30deg); } </style> <body> <div class="bgBar"> <div class="bgF"></div> <div class="bgL"></div> <div class="line"></div> </div> </body> </html>
原文：https://www.cnblogs.com/jiajiamiao/p/11677099.html