如何使“特色”边框的两端都倾斜？

<div class="special-border">
  Content goes here
</div>

.special-border {
  position: relative;
  padding: 20px;
  border: 2px solid #000;
}

.special-border::before,
.special-border::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  background-color: #000;
}

.special-border::before {
  left: -2px;
  transform: skew(-45deg);
}

.special-border::after {
  right: -2px;
  transform: skew(45deg);
}