css倾斜_如何使用CSS创建倾斜的边缘

在本文中，我们将研究如何在网页上（水平）创建倾斜的边缘效果。 基本上，它看起来像这样：

具有稍微倾斜的边缘应使我们的Web布局看起来不那么僵硬和沉闷。 为此，我们将使用伪元素 ::before和::after以及CSS3 Transform 。

使用伪元素

该技术使用伪元素::before和::after来倾斜元素边缘。 在此示例中，我们将调整底部边缘。

.block{
	height: 400px;
	width: 100%;
	position: relative;
	background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
}
.block::after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background: inherit;
	z-index: -1;
	bottom: 0;
	transform-origin: left bottom;
	transform: skewY(3deg);
}

让我们回顾一下。

transform-origin指定我们要转换的元素的坐标。 在上面的示例中，我们指定left bottom ，它将开始坐标放在块的左下角。

transform: skewY(3deg); 使::after块倾斜或倾斜3度。 由于我们将起始坐标指定为左下角，因此该块的右下角将升高3度。 如果将transform-origin交换到right bottom ，则左下角将升高3度。

您可以添加纯色背景或渐变以查看结果。

使用Sass Mixin使其更容易

为了使此操作更容易，我创建了一个Sass mixin添加有角度的边缘，从而消除了处理样式规则的复杂性带来的麻烦。 使用以下mixin，您可以快速指定要倾斜的一面-左上，右上，左下或右下。

@mixin angle-edge($pos-top:null, $angle-top:null, $pos-btm:null, $angle-btm:null){
	width: 100%;
	position: relative;
	background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
	&::before,
	&::after{
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		background: inherit;
		z-index: -1;
		transition: ease all .5s;
	}

	@if $pos-top{
		&::before{
			@if $pos-top == 'topleft'{
				top: 0;
				transform-origin: right top;
				transform: skewY($angle-top);
			}
			@if $pos-top == 'topright' {
				top: 0;
				transform-origin: left top;
				transform: skewY(-$angle-top);
			} 
		}
	}

	@if $pos-btm{
		&::after{
			@if $pos-btm == 'bottomleft' {
				bottom: 0;
				transform-origin: right bottom;
				transform: skewY(-$angle-btm);

			} 

			@if $pos-btm == 'bottomright' {
				bottom: 0;
				transform-origin: left bottom;
				transform: skewY($angle-btm);
			} 
		}
	}
}

mixin中有四个变量。 前两个变量$pos-top和$angle-top指定顶部的起始坐标和度数 。 后两个变量指定底侧的坐标和度 。

如果填满所有四个变量，则可以使元素的两侧（顶部和底部）倾斜。

使用Sass @include语法将mixin插入元素。 您可以在下面看到示例：

要在左上角添加倾斜的边缘，请执行以下操作：

.block{
	@include angle-edge(topleft, 3deg);
}

要在右下角添加倾斜的边缘，请执行以下操作：

.block{
	@include angle-edge(bottomright, 3deg);
}

要在左上和右下侧添加倾斜的边缘，请执行以下操作：

.block{
	@include angle-edge(topleft, 3deg, bottomright, 3deg);
}

下面是应用了mixins的演示。 更改选择框以切换到另一种样式。

而已！

翻译自: https://www.hongkiat.com/blog/skewed-edges-css/