沉浸式阅读
Beta
原创

CSS 实现平行四边形的示例代码

     订阅 CSS相关     2020-06-10     544    0    0    0    2020-06-10
学习要点:先上效果图 平行四边形可以用做导航栏部分。原理:利用transform属性拉伸矩形。CSS代码 1transform: skewX(-45deg);上面的代码表示:沿X轴倾斜 -45 度。但如果只用上面的代码作用在元素上,会导致其内容也发生倾斜变形,会影响阅读。 解决方法1:嵌套元素 用嵌套元素的方法,对内容再应用一次反向的 skew() 变形,从而抵消容器对内容产生的变形效果。HTML代码123ahref="http://suo.im/1yaTY3"divHOME/div/aCSS代

先上效果图

平行四边形可以用做导航栏部分。

原理:利用transform属性拉伸矩形。

CSS代码

1
transform: skewX(-45deg);

上面的代码表示:沿X轴倾斜 -45 度。

但如果只用上面的代码作用在元素上,会导致其内容也发生倾斜变形,会影响阅读。

解决方法1:嵌套元素

用嵌套元素的方法,对内容再应用一次反向的 skew() 变形,从而抵消容器对内容产生的变形效果。

HTML代码

1
2
3
    <div>HOME</div>
</a>

CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
a {
    width:100px;
    height:40px;
    display: flex;
    justify-content:center;
    align-items:center;
    background:#58a;
    text-decoration:none;
    color:#fff;
    transform: skewX(-45deg);
}
div {
    transform: skewX(45deg);
}

效果如图所示

这种方法在表现上很不错,不过在逻辑上比较直接粗暴。

我们理解的HTML,更应该作用在框架的搭建上,而不是样式的表现上。如果结构层的更变是不允许的,或者希望严格保持结构层的纯净度,这种方法不是好方法。

注意:像上面的例子中,如果想把布局的样式用在a(内联元素)里,记得把它的display设成inline-block或block等值,否则变形不会生效。

这里我设置成flex,为了方便把内容居中。

解决方法二:伪元素

把所有样式应用到伪元素上,然后再对伪元素进行变形。
内容层(文字部分)只做颜色、字号等设置。

HTML代码

1
2
3
    HOME
</a>

CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
a::before {
    content:'';
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:-1;
    background:#58a;
    transform: skewX(-45deg);
}
a {
    width:100px;
    height:40px;
    position:relative;
    display: flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    text-decoration:none;
}

也能得到同样的效果。这种方法不会污染HTML结构层。

这种方法为伪元素保持了良好的灵活性,可以自动继承其宿主元素的尺寸。

首先给宿主元素应用 position: relative 样式,并为伪元素设置 position: absolute,然后再把所有偏移量设置为0,以便让它在水平和垂直方向上都被拉伸至宿主元素的尺寸(top: 0; right: 0; bottom: 0; left: 0;)。

此时,用伪元素生成的方块是重叠在内容之上的,一旦给它设置背景,就会遮住内容。所以要为伪元素设置 z-index: -1 。这样它的堆叠层次就会被推到宿主元素之后。

本文标题: CSS 实现平行四边形的示例代码

本文链接: https://www.mbkfw.com/course/754.html (转载时请注明来源链接)

本文说明: 有问题或投稿请发送至: 邮箱/kf@dtmuban.com    QQ/290948585

特别鸣谢: 如果您觉得本文对您有帮助,请给我们一个小小的赞,收藏本文更利于反复学习哦!

 
本文标签: #css
destoon程序前端开发标签生成器

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“商企云服”
"模板开发网前端开发教学"
每日干货技术分享
 
0

圈友点评

文明上网理性发言,请遵守网络评论服务协议


色彩
×

《客户实名在线注册登记》售后一直都在!

关注

微信
关注

微信扫一扫
不同的环境体验

幸运大转盘,好礼等您拿

模板开发网公众号

模板开发网微信小程序

代授权

程序
授权

黑小二

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。咨询客服

联系客服:

在线QQ: 290948585

客服电话: 18605917465

E_mail邮箱: kf@dtmuban.com

微信公众号: 商企云服

微信小程序: 模板开发

QQ客服 微信客服DT授权代办 在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 18:00

APP下载

安卓
APK

模板开发网安卓版APP

反馈

我要
反馈