vinnlee vinnlee -4 years ago 86
CSS Question

CSS - Style border heading

How do i use css to style a border like this

enter image description here

Here is my current css

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


but is just make a border at bottom the heading, how do i style a border right like the image above

Answer Source

With a pseudo element and 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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download