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

This is a different approach using pure CSS alone to achieve this effect (using the method explained in this answer but reverse rotation of elements).

Basically it involves two pseudo elements that are rotated with a bit of perspective and positioned one below the other to achieve the shape.

This approach works like below:

1. Two pseudo-elements :before and :after which are roughly about half the size (including borders) of the main .button element. The height of each pseudo-element is 35.5px + 3px border on one side (top/bottom) and 1.5px on the other side (because the two overlap at half distance).
2. The top half of the shape is achieved using the :before element whereas the bottom half is achieved using the :after element.
3. Using a rotateX with perspective to achieve the tilted effect and positioning to place the two elements such that they form the expected shape.

Note: There is a bit of extra styling for a sample hover effect which causes the shape to turn into an elongated hexagon. This is not part of the question but is added just for sample (and a bit of fun :)). Also, older versions of Chrome and Safari seems to be giving incorrect output for the hover behavior whereas the latest versions of all browsers are doing fine.

/* General Button Style */

.button {
  position: relative;
  width: 300px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  text-transform: uppercase;
  color: #000;
  margin: 40px auto;
  box-sizing: border-box;
}
.button:before,
.button:after {
  width: 300px;
  left: 0px;
  height: 35.5px;
  z-index: -1;
  border: 4px solid #000;
  border-top-width: 3px;
  border-bottom-width: 3px;
}
.button:before {
  border-bottom: none;
}
.button:after {
  border-top: none;
}
.button:before {
  position: absolute;
  content: '';
  -webkit-transform: perspective(15px) rotateX(-3deg);
  -moz-transform: perspective(15px) rotateX(-3deg);
  transform: perspective(15px) rotateX(-3deg);
}
.button:after {
  position: absolute;
  top: 35.5px;
  content: '';
  -webkit-transform: perspective(15px) rotateX(3deg);
  -moz-transform: perspective(15px) rotateX(3deg);
  transform: perspective(15px) rotateX(3deg);
}
/* Hover Styles */

.button:hover:before,
.button:hover:after {
  background: #000;
}
.button:hover:before {
  top: -3px;
  -webkit-transform: perspective(15px) rotateX(3deg);
  -moz-transform: perspective(15px) rotateX(3deg);
  transform: perspective(15px) rotateX(3deg);
}
.button:hover:after {
  top: 38px;
  -webkit-transform: perspective(15px) rotateX(-3deg);
  -moz-transform: perspective(15px) rotateX(-3deg);
  transform: perspective(15px) rotateX(-3deg);
}
.button:hover {
  color: #fff;
}

Lorem Ipsum

As-is, this would degrade quite well in IE 8 and IE 9 into a square button with borders. However, due to the nullification of one border (border-bottom for :before and border-top for :after) it would leave a white area (resembling a strike-through line) in the middle. This can be overcome by adding a couple of IE < 10 specific styles using conditional comments like in this demo.

Output Screenshots from IE 9 and IE 8: (both normal and during hover)