只倾斜 div 的一个角
Skew only one corner of a div
我只需要拉下英雄div的右下角。我已经尝试了倾斜和旋转的所有配置。
https://codepen.io/alecfried/full/pmvLMw
<div class="position-relative" style="min-height: 400px; background: purple; width: 100%;transform-origin: bottom; transform: skewX(-17deg); overflow: hidden;"> </div>
是的!这是可以实现的,但您可能需要应用这种技巧! :)
.wraper {
width: 100%; /* may remove width:100%, as div is always 100% */
margin: 0 auto;
overflow: hidden;
}
.position-relative {
min-height: 400px;
background: purple;
width: 100%; /* may remove width:100%, as div is always 100% */
transform-origin: bottom;
transform: skewX(-17deg);
}
<div class="wraper">
<div class="position-relative"> </div>
</div>
这是另一个解决方案(在您的评论之后)。虽然我没有删除,但是这个<div class=" wrapper ">
在这里没有职责。
.wrapper {
width: 100%;
/* may remove width:100%, as div is always 100% */
margin: 0 auto;
overflow: hidden;
}
.position-relative {
min-height: 400px;
background: purple;
width: 100%;
/* may remove width:100%, as div is always 100% */
/* transform-origin: bottom; */
/* transform: skewX(-17deg); */
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 80%);
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 80%);
}
<div class="wrapper">
<div class="position-relative"> </div>
</div>
关于 clip-path 你可以在 clippy
上有一些可视化的例子
我只需要拉下英雄div的右下角。我已经尝试了倾斜和旋转的所有配置。
https://codepen.io/alecfried/full/pmvLMw
<div class="position-relative" style="min-height: 400px; background: purple; width: 100%;transform-origin: bottom; transform: skewX(-17deg); overflow: hidden;"> </div>
是的!这是可以实现的,但您可能需要应用这种技巧! :)
.wraper {
width: 100%; /* may remove width:100%, as div is always 100% */
margin: 0 auto;
overflow: hidden;
}
.position-relative {
min-height: 400px;
background: purple;
width: 100%; /* may remove width:100%, as div is always 100% */
transform-origin: bottom;
transform: skewX(-17deg);
}
<div class="wraper">
<div class="position-relative"> </div>
</div>
这是另一个解决方案(在您的评论之后)。虽然我没有删除,但是这个<div class=" wrapper ">
在这里没有职责。
.wrapper {
width: 100%;
/* may remove width:100%, as div is always 100% */
margin: 0 auto;
overflow: hidden;
}
.position-relative {
min-height: 400px;
background: purple;
width: 100%;
/* may remove width:100%, as div is always 100% */
/* transform-origin: bottom; */
/* transform: skewX(-17deg); */
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 80%);
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 80%);
}
<div class="wrapper">
<div class="position-relative"> </div>
</div>
关于 clip-path 你可以在 clippy
上有一些可视化的例子