Draw a top bordered tip with CSS

Question

I am trying to draw a tip in CSS.

I have "middle success" so far, the only problem is that, depending on DIV width, the tip sometimes are not in the center position.

What I want:

My code so far:

.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 solve this?

I thought setting .angle width: 30px and margin: 0 auto, but it have position: absolute, so it is not possible.

Ps: LESS can be used.

Answer 1

No need of so many elements. Just use .logo element and its pseudo classes. and use letter-spacing css property to give space between the letters. (or use the exact font, if you know the name)

CSS

.logo {
    color: #000;
    font-size: 1.4em;
    text-align: center;
    height: 2em;
    margin-top: 2em;
    letter-spacing: 1em;
    text-transform: uppercase;
    line-height: 2em;
    position: relative;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.logo::after, .logo::before {
    content:"";
    border-width: 20px;
    border-style: solid;
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
}
.logo::after {
    border-width: 18px;
    margin-bottom: 1px;
    border-color: transparent transparent white transparent;
}
.logo::before {
    border-color: transparent transparent black transparent;
}

Working Fiddle - using CSS

Working Fiddle - using SCSS