I have been attempting to create a CSS tip.
While I have had some success, the issue arises when the width of the DIV changes, causing the tip to sometimes not be centered.
My Desired Outcome:
The Code I Have Implemented:
.logo {
color: #000;
font-size: 1.4em;
text-align: center;
padding-top: 1.5em;
text-transform: uppercase;
position: relative;
}
.line {
height: 1px;
overflow: hidden;
background: #000;
}
.line.top,
.line.bottom {
width: 90%;
}
.line.top {
margin: 0 auto 4px;
}
.line.bottom {
margin: 4px auto 0;
}
.angle {
position: absolute;
top: 19px;
left: 46%; // I think my problem is here!
}
.angle .line.left,
.angle .line.right {
width: 20px;
}
.angle .line.left {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 7px;
}
.angle .line.right {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin: -7px;
}
<div class="logo">
<div class="angle">
<div class="line left"></div>
<div class="line right"></div>
</div>
<div class="line top"></div>
MY TEXT
<div class="line bottom"></div>
</div>How can I address this issue?
I have considered setting .angle width: 30px and margin: 0 auto, however, since it has position: absolute, this approach is not feasible.
Note: LESS can also be utilized in this scenario.