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

厦门建设将介绍如何使用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属性应用于伪元素以创建对角线边缘。

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 网站建设使用CSS中的对角容器,用css自作斜边形
分享到:
赞(0)
广告位820*80