建设将介绍如何使用clip-path属性在CSS中创建全宽对角线部分。
前几天，我们发表了对角线英雄组成的的变化英雄部件，其特色是倾斜顶部/底部边缘。这些效果可以帮助打破仅基于矩形截面的设计的“单调”。
我们开工吧！
我已经整理了一个视频教程，解释了可用于实现对角线效果的不同技术。
我们在本教程中构建的组件基于CodyHouse框架。
有不同的方法来创建对角线部分（在CSS中总是如此？）。在我们的例子中，我们依赖于clip-path属性。
所述夹路径属性允许通过定义充当掩模的区域将它夹被施加到，该元素。具体来说，使用面函数可以指定确定多边形形状的坐标集。多边形外部的元素部分将不可见。
.component {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
在上面的示例中，坐标返回矩形。坐标的第一个值是指x轴，第二个值指的是y轴。
在我们的教程中，我们想要创建一个与英雄组件不同的形状; 因此我们编辑坐标以剪掉英雄的部分。
.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元素本身。
如果我们直接剪辑英雄元素，我们最终会显示英雄下方的部分背景（被剪掉的部分）。如果我们考虑具有不同颜色的部分的布局，我们在部分之间创建三角形：
通过创建一个::before伪元素，我们可以扩展英雄背景的大小（覆盖上部和下部的一小部分），从而消除额外的三角形。然后将clip-path属性应用于伪元素以创建对角线边缘。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/259362.html