时间戳

首页 > 解决方案 > 只倾斜 div 的一个角

css - 只倾斜 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>

标签： cssskew

解决方案

这是另一个解决方案（在您发表评论之后）。虽然我没有删除，但这<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>

关于剪辑路径，您可以在clippy有一些视觉示例

推荐阅读