How to create a div with angled corners in CSS

Question

I need to create div with angled corners (not rounded) with 2px border-width at my div:

I need a CSS-only solution

.center-link {
    text-align: center;
}

.continue {
    text-decoration: none;
    border: 2px solid #26368d;
    border-radius: 10px;
    background-color: transparent;
    margin: 0 auto;
    padding: 10px 10px 9px;
    font-family: 'Raleway';
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    color: #26368d;
    transition: all 0.5s ease;
}

<div class="center-link"><a href="#" class="continue">Продолжить читать</a></div>

Answer 1

You should be able to keep a hit test accurate by using a skew along with a perspective, allowing you to create this bevelled button without affecting the user experience.

Something like adding:

     transform: perspective(25px) rotateY(45deg); 

A quick demo would be:

button {
  border: 0;
  border-top: 5px solid tomato;
  border-bottom: 5px solid tomato;
  color: tomato;
  margin-left: 20px;
  margin-right: 20px;
  background: transparent;
  padding: 10px;
  outline: none;
  padding-left: 50px;
  padding-right: 50px;
  position: relative;
  cursor: pointer;
}
button:before {
  content: "";
  position: absolute;
  top: -5px;
  left: 100%;
  height: 100%;
  width: 20px;
  background: inherit;
  transform: perspective(25px) rotateY(45deg);
  transform-origin: center left;
  border-top: 5px solid tomato;
  border-right: 8px solid tomato;
  border-bottom: 5px solid tomato;
}
button:after {
  content: "";
  position: absolute;
  top: -5px;
  right: 100%;
  height: 100%;
  width: 20px;
  background: inherit;
  transform: perspective(25px) rotateY(-45deg);
  transform-origin: center right;
  border-top: 5px solid tomato;
  border-left: 8px solid tomato;
  border-bottom: 5px solid tomato;
}

<button>Button</button>

As a side note, this solution can be shortened and made a lot more efficient by placing the duplicate rules within a single selector (button:before, button:after{})

Answer 2

You could take a loook at gradient or single pixel image and background properties, background-size will help to draw the shapes

body {
  text-align:center;
}
a {
  display:inline-block;
  text-decoration:none;
  color:inherit;/* will use parent color if not reset */
  margin:1em;
  padding:0.5em 1em;
  background: /* lets draw the background image via current color if text color is to be matched */
    linear-gradient(45deg, transparent 0.5em, currentcolor 0.5em, currentcolor calc(0.5em + 2px), transparent calc(0.5em + 2px)),
    linear-gradient(-45deg, transparent 0.5em, currentcolor 0.5em, currentcolor calc(0.5em + 2px), transparent calc(0.5em + 2px)),linear-gradient(225deg, transparent 0.5em, currentcolor 0.5em, currentcolor calc(0.5em + 2px), transparent calc(0.5em + 2px)),linear-gradient(-225deg, transparent 0.5em, currentcolor 0.5em, currentcolor calc(0.5em + 2px), transparent calc(0.5em + 2px)),
    linear-gradient(to left, currentcolor, currentcolor) top no-repeat,
    linear-gradient(to left, currentcolor, currentcolor) bottom no-repeat,
    linear-gradient(to top, currentcolor, currentcolor) left no-repeat,
    linear-gradient(to top, currentcolor, currentcolor) right no-repeat;
  /* resize gradient/image in order to draw pieces needed */
  background-size:
    auto auto,
    auto auto,
    auto auto,
    auto auto,
    calc(100% - 1em - 6px ) 2px,
    calc(100% - 1em - 6px) 2px,
    2px  calc(100% - 1em - 6px ),
    2px  calc(100% - 1em - 6px)
    ;
}
/* find out the purpose of currentcolor here */
:nth-child(1) {
  color:purple
}
:nth-child(2) {
  color:gold
}
:nth-child(3) {
  color:pink
}
:nth-child(4) {
  color:tomato
}

:nth-child(5) {
  color:turquoise
}
/* increase size via padding ? */
:nth-child(6) {
  padding:1em 2em;
  color:gray
}

<a href="#">button link</a>
<a href="#">button link</a>
<a href="#">button link</a>
<a href="#">button link</a>
<a href="#">button link</a>
<a href="#">button link</a>

Demo pen to play with

Answer 3

You could use two span's for left and right border and then use :before and :after on those spans to create corners.

a {
  text-decoration: none;
  white-space: nowrap;
  margin: 10px;
}
.el {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  margin: 50px;
  position: relative;
}
span {
  height: 20px;
  position: relative;
}
span.left {
  border-left: 1px solid black;
}
span.right {
  border-right: 1px solid black;
}
.left {
  margin-left: -10px;
}
.right {
  margin-right: -10px;
}
span:before,
span:after {
  content: '';
  position: absolute;
  width: 1px;
  background: black;
  height: 15px;
}
.left:before {
  transform: rotate(40deg);
  top: -13px;
  left: 4px;
}
.left:after {
  transform: rotate(-40deg);
  bottom: -13px;
  left: 4px;
}
.right:before {
  transform: rotate(-40deg);
  top: -13px;
  right: 4px;
}
.right:after {
  transform: rotate(42deg);
  bottom: -13px;
  left: -5px;
}

<div class="el">
  <span class="left"></span>
  <a href="">Lorem ipsum dolor.</a>
  <span class="right"></span>
</div>