1. David Wu首页
  2. web前端
  3. CSS

网站建设使用CSS中的对角容器,用css自作斜边形

WP建设将介绍如何使用clip-path属性在CSS中创建全宽对角线部分。 前几天,我们发表了对角线英雄组成的的变化英雄部件,其特色是倾斜顶部/底部边缘。这些效果可以帮助打破仅基于矩形截面的设计的“单调”。 我们开工吧! 我已经整理了一个视频教程,解释了可用于实现对角线效果的不同技术。 我们在本教程中构建的组 WP网站建设

厦门建设将介绍如何使用clip-path属性在CSS中创建全宽对角线部分。

WordPress网站建设

前几天,我们发表了对角线英雄组成的的变化英雄部件,其特色是倾斜顶部/底部边缘。这些效果可以帮助打破仅基于矩形截面的设计的“单调”。

我们开工吧!

我已经整理了一个视频教程,解释了可用于实现对角线效果的不同技术。

我们在本教程中构建的组件基于CodyHouse框架。

有不同的方法来创建对角线部分(在CSS中总是如此?)。在我们的例子中,我们依赖于clip-path属性。

所述夹路径属性允许通过定义充当掩模的区域将它夹被施加到,该元素。具体来说,使用面函数可以指定确定多边形形状的坐标集。多边形外部的元素部分将不可见。

.component {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

在上面的示例中,坐标返回矩形。坐标的第一个值是指x轴,第二个值指的是y轴。

网站建设使用CSS中的对角容器,用css自作斜边形
剪辑路径坐标示例

在我们的教程中,我们想要创建一个与英雄组件不同的形状; 因此我们编辑坐标以剪掉英雄的部分。

.hero–diagonal {
position: relative;
background-color: transparent;

&::before {
content: '';
position: absolute;
top: -50px;
left: 0;
width: 100%;
height: calc(100% + 100px);
clip-path: polygon(0% 0%, 100% 50px, 100% 100%, 0% calc(100% – 50px));
}

.hero__content {
position: relative;
z-index: 1;
}
}

 

我们决定将其伪元素作为目标,而不是将clip-path应用于hero元素本身。

如果我们直接剪辑英雄元素,我们最终会显示英雄下方的部分背景(被剪掉的部分)。如果我们考虑具有不同颜色的部分的布局,我们在部分之间创建三角形:

网站建设使用CSS中的对角容器,用css自作斜边形

通过创建一个::before伪元素,我们可以扩展英雄背景的大小(覆盖上部和下部的一小部分),从而消除额外的三角形。然后将clip-path属性应用于伪元素以创建对角线边缘。

网站建设使用CSS中的对角容器,用css自作斜边形

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/11890

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注