.container {
position: relative;
}
.your-position {
position: absolute;
left:0;
transform: translateY(-110%);
// triangle
border-color: blue transparent transparent;
border-style: solid;
border-width: 0.4rem 0.3rem 0;
height: 0;
width: 0;
}
.value {
position: absolute;
transform:translateX(-50%) translateY(-110%);
}
<div class="container">
<div class="your-position">
<div class="value">Your value is: {{value}}</div>
</div>
</div>
.container {
position: relative;
}
.your-position {
position: absolute;
left:0;
transform: translateY(-110%);
// triangle
border-color: blue transparent transparent;
border-style: solid;
border-width: 0.4rem 0.3rem 0;
height: 0;
width: 0;
}
.value {
position: absolute;
transform:translateX(-50%) translateY(-110%);
}
<div class="container">
<div class="your-position">
<div class="value">Your value is: {{value}}</div>
</div>
</div>