CSS-样式边框标题

Question

我如何使用CSS设置边框样式

这是我目前的CSS

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

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

Answer 1

使用伪元素并进行transform: skew()

 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; } 

 <h2>asdf</h2>