《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);
}

获得的结果以下：

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