css - 使用 CSS 绘制顶部边框提示

Question

我正在尝试用 CSS 绘制提示。

到目前为止，我取得了“中等成功”，唯一的问题是，根据 DIV 宽度，提示有时不在中心位置。

我想要的:

到目前为止我的代码:

.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>

我该如何解决这个问题？

我想设置 .angle width: 30px 和 margin: 0 auto，但它有 position: absolute，所以这是不可能的。

ps:LESS可以用

Answer 1

不需要那么多元素。只需使用 .logo 元素及其伪类。并使用 letter-spacing css 属性在字母之间留出空间。 (或使用确切的字体，如果您知道名称)

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