元素形状之“平行四边形”

设计场景

---

• 在视觉设计中，平行四边形往往可以传达出一种 动感
• 只让容器的形状倾斜，而保持其内容不变

嵌套元素解决方案

---

结构

<a href="http://www.jianshu.com/users/47a99e5b5858/latest_articles" class="button">
  <div>点击我</div>
</a>

风格

.button {
  display: inline-block;
  padding: 16px 32px;
  background-color: #58a;
  color: #fff;
  text-decoration: none;
  transform: skew(-45deg);
}
.button > div {
  transform: skew(45deg);
}

说明：该方法虽然实现设计，但需要添加一层额外的HTML结构

伪元素解决方案

---

结构

<a class="button" href="http://www.jianshu.com/users/47a99e5b5858/latest_articles">点击我</a>

风格

.button {
  position: relative;
  display: inline-block;
  padding: 6px 32px;
  color: #fff;
}
.button::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: #58a;
  transform: skew(45deg);
}

说明：所有的偏移量都设为零，目的是让它在水平和垂直方向上都被拉伸至主元素的尺寸；该方法 适用于其他任何变形样式，当我们 想变形一个元素而不想变形它的内容 时就可以用到它

《CSS SECRETS》