平行四边形

_菡曳_IP属地: 浙江
字数 164阅读 390

网页设计中的平行四边形

如图,希望创建一个按钮状的平行四边形链接。如果直接用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);
        }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
更多精彩内容,就在简书APP
"小礼物走一走,来简书关注我"
还没有人赞赏,支持一下
总资产1共写了3213字获得0个赞共0个粉丝

推荐阅读更多精彩内容