css - 如何创建一个在两侧具有尺寸箭头且尺寸活动区域的 Flexbox

Question

我有一个页面可以看到一个盒子。这有 2 个区域，箭头用于输入尺寸。我不熟悉下面的概念，也没有运气将箭头放在我需要的地方。长度等，然后将文本部分居中在中间。很久以前，我从网上某个地方拉了这个，然后又回到了它。有谁知道这件事或我可以去哪里了解更多信息？它也不能很好地与引导程序一起使用。它不会像其他所有内容一样在屏幕上进行调整。我需要它来响应。

.shape {
      position: absolute;
      margin-left: 30px;
      margin-top: 5px;
      background: white;
      height: 284px;
      width: 355px;
      text-align: center;
      line-height: 230px;
    }

    .shape-container {
      display: block;
      position: absolute;
      width: 400px;
      height: 325px;
      background: Gainsboro;
      padding: 2px;
    }

    svg {
      width: 284px;
      height: 20px;
    }

    .svgContainer {
      position: absolute;
      display: inline-block;
      text-align: center;
      width: 225px;
      height: 20px;
    }

    .svgContainer:after {
        content: attr(data-dimention);
        display: inline-block;
        position: relative;
        top: -24px;
        padding: 0 8px;
        background-color: Gainsboro;
        color: #8c8b8b;
        font-size: 12px;
        line-height: 20px;
    }

    .svgLeft {
      left: -96px;
      top: 150px;
      transform: rotate(-90deg);
    }

    .svgBottom {
      bottom: 8px;
      right: 8px;
    }

<div class="shape-container">
        <div class="svgContainer svgLeft" data-dimention="30 mm">
          <svg>
            <marker id="arrow-left" markerHeight="16" markerUnits="strokeWidth" markerWidth="20" orient="auto" refX="3" refY="0" viewBox="0 -5 20 20">
              <path d="M 15 -5 L 0 0 L 15 5 z" fill="black" />
            </marker>
            <marker id="arrow-right" markerHeight="16" markerUnits="strokeWidth" markerWidth="20" orient="auto" refX="-3" refY="0" viewBox="-15 -5 20 20">
              <path d="M -15 -5 L 0 0 L -15 5 z" fill="black" />
            </marker>

            <line id="e3_line" x1="0" y1="10" x2="284" y2="10" stroke="black" style="stroke-width: 1px; fill: none; marker-start: url(&quot;#arrow-left&quot;); marker-end: url(&quot;#arrow-right&quot;);" />
         </svg>
    </div>
    <div class="shape">
       shape image
    </div>
    <div class="svgContainer svgBottom" data-dimention="30 mm">
         <svg>
            <marker id="arrow-left" markerHeight="16" markerUnits="strokeWidth" markerWidth="20" orient="auto" refX="3" refY="0" viewBox="0 -5 20 20">
               <path d="M 15 -5 L 0 0 L 15 5 z" fill="black" />
            </marker>
            <marker id="arrow-right" markerHeight="16" markerUnits="strokeWidth" markerWidth="20" orient="auto" refX="-3" refY="0" viewBox="-15 -5 20 20">
               <path d="M -15 -5 L 0 0 L -15 5 z" fill="black" />
            </marker>

            <line id="e3_line" x1="0" y1="10" x2="225" y2="10" stroke="black" style="stroke-width: 1px; fill: none; marker-start: url(&quot;#arrow-left&quot;); marker-end: url(&quot;#arrow-right&quot;);" />
        </svg>
    </div>
</div>


    

标签： csssvg