CSS - 样式边框标题

Question

如何使用css为这样的边框设置样式

这是我目前的css

header .fixed-header .left h2 {
   font-size: 14px;
   display: inline-block;
   border-bottom: 1px solid #000;
}

但是只是在标题的底部做一​​个边框，我如何像上面的图像那样设置边框的样式

Answer 1

使用伪元素transform: skew()

＆＃13;

＆＃13;

h2 {
  display: inline-block;
  position: relative;
  padding: 0 2em;
}
h2:before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: solid black;
  border-width: 0 1px 1px 0;
  transform: skew(-45deg);
  transform-origin: bottom;
}

＆＃13;

<h2>asdf</h2>

＆＃13;

＆＃13;

＆＃13;