倒角边框的最简单方法

Question

我有什么：

我需要什么：

代码：http://codepen.io/marekkobida/pen/aNpKaV?editors=1100

HTML

<div class="experiment">
  <h1>Experiment</h1>
</div>

CSS

body { margin: 2rem; }

.experiment {
  background: #222;
  color: #fff;
  padding: 2rem;
  text-align: center;

  &::before {

  }

  &::after {

  }
}

Answer 1

倾斜是这种工作的最佳方式。

.experiment {
  background: #222;
  color: #fff;
  padding: 2rem;
  text-align: center;
  transform: skew(0deg, -10deg);
}

Answer 2

添加

transform：skew（0deg，-10deg）; 边距：8rem;

它会得到确切的输出