Unit measurement lines in CSS around the shape div - css

Question

So I want to create something what you can see in Codepen however as I was getting into point to add arrows into both ends I realized that I have started that all out in a wrong way. My CSS will grow way to long for such small thing and will have probably problem with other elements on the page. I could not figure out what's the best approach to create these left and bottom lines with arrows in both ends and value from attribute so I hope some of you can point me out to right direction.
.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

I played with your problem a little...
See my Fiddle
I kept most of your CSS, but dropped the :before pseudos wich were rendering arrows.
I kept the :after pseudos wich show dimentions.
To draw the left and right arrows, I used classes wich only draw a triangle with the border of an element.
I applied those two classes on another element (I used hr again... Could be something else) placed before and after your «ruler» hr.
These three hr are wrapped in a div for positioning and rotation.
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>