美文网首页
平行四边形

平行四边形

作者: _菡曳_ | 来源:发表于2017-07-27 17:05 被阅读0次
    网页设计中的平行四边形
    如图,希望创建一个按钮状的平行四边形链接。如果直接用tansform中的skewX()属性扭曲<a>元素(PS:默认显示为行内的元素display属性一定要记得设置为其他值,如:block或inline-block),会导致文字一起被扭曲。有以下解决方案:
    嵌套元素方案
    可以添加一层div元素包裹内容,再使用skewX()属性对内容进行反向变形从而抵消容器的变形效果。
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>平行四边形</title>
        <style type="text/css" media="screen">
            /*嵌套元素方案*/
            .button{
                display: block;
                margin:0 auto;
                padding: .3em;
                width: 5em;
                font-size: 2em;
                text-align: center;
                text-decoration: none;
                color:#fff;
                background: #58a;
                transform: skewX(-45deg);
            }
            .button > div{
                transform: skewX(45deg);
            }
        </style>
    </head>
    <body>
        <!-- 嵌套元素方案 -->
        <a href="" class="button">
            <div>Click me</div>
        </a>
    </body>
    </html>
    
    使用嵌套元素实现的效果

    伪元素方案
    将所有样式(背景、边框等)应用到伪元素上,然后再对伪元素进行变形。如果希望伪元素保持良好的灵活性,可以自动继承其宿主元素的尺寸,甚至当宿主元素的尺寸是由其内容来决定时仍然如此。一个简单的办法是给宿主元素应用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);
            }
    

    相关文章

      网友评论

          本文标题:平行四边形

          本文链接:https://www.haomeiwen.com/subject/byiokxtx.html