Search code examples
htmlcsscss-shapes

Square brackets with CSS

I wish to create a [ and ] bracket just with CSS. Is there a way to specify the top and bottom border (Without slicing the image) so it looks like a bracket?

.bracket {
  border-top:20px;
  border-bottom:20px;
  border-right:none;
  border-left: 1px solid black; 
}
Solution 

  • .b:after {
  content: "]"
}

.b:before {
  content: "["
}
    <span class="b">text</span>

    working example: http://codepen.io/yardenst/pen/bhGIy