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

Most easiest and neat solution would be to use svg to create the border.

#container {
  position: relative;
  width: 200px;
  height: 30px;
}
#content {
  text-transform: uppercase;
  position: absolute;
  width: 200px;
  height: 30px;
  top: 0;
  text-align: center;
  line-height: 30px;
}

  
  
lorem ipsum

---

You could even spice it up with some curves using quadratic curves.

#container {
  position: relative;
  width: 200px;
  height: 30px;
  margin-bottom: 30px;
}
#content {
  text-transform: uppercase;
  position: absolute;
  width: 200px;
  height: 30px;
  top: 0;
  text-align: center;
  line-height: 30px;
}

  
  
lorem ipsum



  
  
lorem ipsum



  
  
lorem ipsum

---

You could easily add a drop shadow effect.

#container {
  position: relative;
  width: 200px;
  height: 30px;
  margin-bottom: 30px;
}
#content {
  text-transform: uppercase;
  position: absolute;
  width: 200px;
  height: 30px;
  top: 0;
  text-align: center;
  line-height: 30px;
}

  
  
lorem ipsum



  
  
lorem ipsum



  
  
lorem ipsum

---

Alternatively you could always use :after and :before :pseudo-elements.

The width and height of the :after and :before :pseudo-elements were calculated using some basic trigonometry.

The opposite side is the width and height of the :after and :before :pseudo-elements. The one on the left is given top and right borders and the one on the right is given top and left borders. Then, the one on the left has been rotated 45deg and the one on the right has been rotated -45deg.

div {
  position: relative;
  text-transform: uppercase;
  width: 200px;
  height: 30px;
  text-align: center;
  line-height: 27px;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  box-sizing: border-box;
}
div:after,
div:before {
  position: absolute;
  content: '';
  width: 21.21px;
  height: 21.21px;
  border-top: 3px solid black;
  border-right: 3px solid black;
  transform: rotate(45deg);
  box-sizing: border-box;
  top: 1px;
  left: -9px;
}
div:after {
  border-right: 0;
  border-left: 3px solid black;
  left: 100%;
  margin-left: -10px;
  transform: rotate(-45deg);
}

lorem ipsum