html - 旋转时填充所有内容

Question

当我将我的 div 旋转 177 度时，它旋转得很好，但没有填充所有内容https://prnt.sc/sklcga就像这张图片一样，是否可以全部填充？

 <div class="head">
 </div>

.head{
  width:100%;
  height:450px;
  background:#fff;
  transform: rotate(177deg);
}

标签： htmlcss

Answer 1

这更适合skew：

.head{
  height:450px;
  background:#fff;
  transform: skewY(177deg);
  transform-origin:right;
}

body {
  background:red;
  margin:0;
}

<div class="head">
 </div>