css - 形状 div 周围 CSS 中的单位测量线

Question

所以我想创造一些你可以在 Codepen 中看到的东西然而，当我开始着手在两端添加箭头时，我意识到我以错误的方式开始了这一切。我的 CSS 会因为这么小的东西而增长，并且页面上的其他元素可能会出现问题。我无法弄清楚创建这些两端带有箭头和属性值的左线和底线的最佳方法是什么，所以我希望你们中的一些人可以指出正确的方向。

.ruler-left:after {
    content: attr(data-height);
    display: inline-block;
    position: relative;
    top: -15px;
    padding: 0 10px;
    background-color: Gainsboro;
    color: #8c8b8b;
    font-size: 12px;
    line-height: 25px;
}
.ruler-bottom {
    position: relative;
    display: inline-block;
    text-align: center;
    width: 225px;
    height: 2px;
    float: right;
    margin-right: 5px;
    margin-top: 110px;
    font-size: 0px;
}
.ruler-bottom:before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    border-top: 5px solid Gainsboro;
    border-right: 10px solid black;
    border-bottom: 5px solid Gainsboro;
    background-color: Gainsboro;
}
.ruler-bottom:after {
    content: attr(data-width);
    display: inline-block;
    position: relative;
    top: -15px;
    padding: 0 10px;
    background-color: Gainsboro;
    color: #8c8b8b;
    font-size: 12px;
    line-height: 25px;
}
.shape {
    position: absolute;
    margin-left: 30px;
    margin-top: 5px;
    background: white;
    height: 225px;
    width: 225px;
    text-align: center;
    line-height: 230px;
}

<div class="shape-container">
     <hr class="ruler-left" data-height="30 mm">
     <div class="shape">Shape image</div>
     <hr class="ruler-bottom" data-width="30 mm">
</div>

Answer 1

我稍微解决了你的问题......

See my Fiddle

我保留了你的大部分 CSS，但删除了 :before 伪代码，它们是渲染箭头。
我保留了显示尺寸的 :after 伪代码。

为了绘制左箭头和右箭头，我使用了只用元素的 border 绘制三 Angular 形的类。
我将这两个类应用到另一个元素上(我再次使用了 hr ......可能是其他东西)放置在你的 «ruler» hr 之前和之后。
这三个hr包裹在一个div中用于定位和旋转。

CSS

.arrowRight{
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #000000;
}
.arrowLeft{
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 16px 8px 0;
  border-color: transparent #000000 transparent transparent;
}

/* -------- */
.shape {
    position: absolute;
    margin-left: 30px;
    margin-top: 5px;
    background: white;
    height: 225px;
    width: 225px;
    text-align: center;
    line-height: 230px;
}
.shape-container {
    display: block;
    position:absolute;
    width: 260px;
    height: 260px;
    background: Gainsboro;
    padding: 2px;
}
.ruler-left-div {
    position:absolute;
    left:-104px;
    top:110px;
    display: inline-block;
    text-align: center;
    width: 225px;
    height: 20px;
    transform: rotate(-90deg);
}
.ruler-left {
    display: inline-block;
    width: 190px;
    height: 2px;
}
.ruler-left:after {
    content: attr(data-width);
    display: inline-block;
    position: relative;
    top: -15px;
    padding: 0 10px;
    background-color: Gainsboro;
    color: #8c8b8b;
    font-size: 12px;
    line-height: 25px;
}
.ruler-bottom-div {
    position:absolute;
    bottom:10px;
    right:8px;
    display: inline-block;
    text-align: center;
    width: 225px;
    height: 20px;
}
.ruler-bottom {
    display: inline-block;
    width: 190px;
    height: 2px;
    margin-bottom:8px;
}
.ruler-bottom:after {
    content: attr(data-height);
    display: inline-block;
    position: relative;
    top: -15px;
    padding: 0 10px;
    background-color: Gainsboro;
    color: #8c8b8b;
    font-size: 12px;
    line-height: 25px;
}

HTML

<div class="shape-container">
    <div class="ruler-left-div"><hr class="arrowLeft"><hr class="ruler-left" data-width="30 mm"><hr class="arrowRight"></div>
    <div class="shape">
      shape image
    </div>
    <div class="ruler-bottom-div"><hr class="arrowLeft"><hr class="ruler-bottom"  data-height="30 mm"><hr class="arrowRight"></div>
</div>