问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

请问下css要怎么画这种样式？

头像
正能量前线
    5331393129

    image.png

    如图所示，由于宽度是不固定的，如果箭杆长度也是不固定的，用css要怎么画呢？

    前端css
    阅读 1.1k
    3 个回答
    得票最新
    头像
    hfhan
      28.9k72241
      ✓ 已被采纳

      主要是字符不好画，其他的可以使用border或background来画，箭头的画，下面我使用字符<>来绘制，也可以试试→←，或者字符，svg等
      image.png

      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style type="text/css">
        .scale-line{
            width: 200px;
            height: 26px;
            line-height: 26px;
            border-left: 1px solid #333;
            border-right: 1px solid #333;
            display: flex;
            align-items: center;
        }
        .scale-line::before,
        .scale-line::after{
            content: '';
            display: inline-block;
            width: calc(50% - 20px);
            flex: 1;
            height: 1px;
            background: #333;
        }
        
        .scale-line .num{
            width: 60px;
            text-align: center;
            position: relative;
            margin-top: 2px;
        }
        .scale-line .num::before,
        .scale-line .num::after{
            position: absolute;
            font-family: math;
            font-size: 14px;
        }
        .scale-line .num::before{
            content: '>';
            right: calc(100% - 1px);
        }
        .scale-line .num::after{
            content: '<';
            left: calc(100% - 1px);
        }
    </style>
</head>
<body>
    <div class="scale-line">
        <span class="num">
            200
        </span>
    </div>
</body>
<script>
    
</script>
</html>
      头像
      FelixAn
        1k1215

        意思200是固定宽度的吗？用flex就能实现

        <div style="display:flex; justify-content: center">
<div style="width: 200px">200</div>
</div>
        头像
        Seven
          587116
          <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation</title>
<style>
  .moving-element {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: red;
    animation: move 2s linear infinite;
  }

  @keyframes move {
    0% {
      left: 0;
      top: 0;
    }
    100% {
      left: 200px; /* 终点的横坐标 */
      top: 0;
    }
  }
</style>
</head>
<body>
  <div class="moving-element"></div>
</body>
</html>

          在这个示例中，.moving-element将从左上角移动到右上角，横向距离为200px。你可以根据需要调整left和top的值来改变移动的路径和距离。

          查看全部 3 个回答
          推荐问题
          宣传栏