Oblique or twisted border shape

Question

I\'m interested if it\'s possible to create wrapped (or maybe better said twisted) border using CSS. Effect I wanted to achieve is in the picture.

Answer 1

Yes, you can do this purely in CSS by manipulating the :before and :after psuedo elements.

The key advantages are that you can keep your HTML 'as is', and it maintains a strict seperation of concerns between content (html) and styling (CSS).

body {
  text-align: center;
}
div {
  border: 2px solid;
  display: inline-block;
  position: relative;
  padding: 0 40px;
  margin: 20px;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  border-right: 0;
  border-left: 0;
}
div:after,
div:before {
  border: 2px solid;
  height: 30px;
  width: 30px;
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  transform: rotate(45deg);
}
div:after {
  right: -23px;
}
div:before {
  left: -23px;
}

Lorem Ipsum