围绕形状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三角形。
我将这两个类应用到另一个元素上（我再次使用了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>