平行四边形

网页设计中的平行四边形

如图，希望创建一个按钮状的平行四边形链接。如果直接用tansform中的skewX()属性扭曲元素（PS：默认显示为行内的元素display属性一定要记得设置为其他值，如：block或inline-block），会导致文字一起被扭曲。有以下解决方案：
嵌套元素方案
可以添加一层div元素包裹内容，再使用skewX()属性对内容进行反向变形从而抵消容器的变形效果。

    
    
    
    


    
    
        
Click me
    

使用嵌套元素实现的效果

伪元素方案
将所有样式（背景、边框等）应用到伪元素上，然后再对伪元素进行变形。如果希望伪元素保持良好的灵活性，可以自动继承其宿主元素的尺寸，甚至当宿主元素的尺寸是由其内容来决定时仍然如此。一个简单的办法是给宿主元素应用position：relative样式，并为伪类元素设置position：absolute，然后再把所有偏移量设置为零，以便让它在水平和垂直方向上都被拉伸至宿主元素的尺寸。

        .button{
            display: block;
            position: relative;
            margin:0 auto;
            padding: .3em;
            width: 5em;
            font-size: 2em;
            text-align: center;
            text-decoration: none;
            color:#fff;
        }
        .button::before{
            content: '';
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            z-index: -1;
            background: #58a;
            transform: skewX(-45deg);
        }