《CSS揭秘》：平行四边形

在视觉设计中，平行四边形往往可以传达出一种动感。

问题

使用CSS来创建平行四边形。可以使用transform: skewX(-45deg)

但是这样会使里面的内容也倾斜。有两种解决方案可以解决这个问题

嵌套元素方案

使用一层额外的HTML元素来包裹内容，对容器设置skewX，在内容上应用一次反向skewX变形

.button { transform: skewX(45deg); }
.button > div { transform: skewX(-45deg); }

结果如下：

伪元素方案

使用伪元素方案。将所有样式应用到伪元素上，然后对伪元素进行变形。为了使伪元素保持良好的灵活性，可以自动继承主元素的属性。最简单的方式是对主元素设置position:relative;,对伪元素设置positon:absolute;。

.button {
    position: relative;
    display: inline-block;
    padding: .5em 1em;
    border: 0; margin: .5em;
    background: transparent;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font: bold 200%/1 sans-serif;
}

.button::before {
    content: ''; /* To generate the box */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: skew(45deg);
}

得到的结果如下：

使用伪元素方案还可以实现一些其它效果，比如多重背景，边框内圆角，多重边框等。