CSS实现的数量对比图

若♀阳

已于 2023-09-20 09:21:31 修改

阅读量223

点赞数

文章标签： css 前端 css3 html

于 2023-09-11 16:19:15 首次发布

本文链接：https://blog.csdn.net/dmr123456/article/details/132811887

版权

效果如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>性别数量展示</title>
  <script>
    var maleNum = 110, femaleNum = 108;
    var maleWidth = (maleNum / (maleNum + femaleNum)) * 425;
    var femaleWidth = +(425 - maleWidth);
    window.onload = function () {
      document.getElementById('male').style.width = maleWidth + 'px';
      document.getElementById('maleNum').innerText = maleNum + '人';
      document.getElementById('female').style.width = femaleWidth + 'px';
      document.getElementById('femaleNum').innerText = femaleNum + '人';
    }

  </script>
  <style>
    body {
      background-color: #d0e4fe;
    }

    .gender {
      position: relative;
      display: flex;
      width: 425px;
      height: 25px;
      overflow: hidden;
      border-radius: 50px;
    }

    .male {
      position: absolute;
      left: 0;
      z-index: 2;
      line-height: 25px;
      line-height: 25px;
      padding-right: 12.5px;
      text-align: right;
      background-image: linear-gradient(50deg, #e6cf00 2%, #ff8e00 100%);
      clip-path: polygon(0 0, 0 100%, calc(100% - 25px) 100%, 100% 0);
    }

    .female {
      position: absolute;
      right: 0;
      z-index: 1;
      line-height: 25px;
      padding-left: 12.5px;
      text-align: left;
      background-image: linear-gradient(120deg, #d74618 0%, #ec9c7c 93%);
      clip-path: polygon(25px 0, 100% 0%, 100% 100%, 0% 100%);
    }
  </style>

</head>

<body>

  <div class="gender">
    <div class="male" id="male">
      <span style="margin-right:20px" id="maleNum"></span>
    </div>
    <div class="female" id='female'>
      <span style="margin-left:20px" id="femaleNum">223人</span>
    </div>
  </div>
</body>

</html>