html - 元素样式，使其可以产生旋转和倾斜的效果

Question

嗨，我想知道如何使用元素和 CSS 重新创建图像中出现的标题部分的倾斜样式？

body {
  margin: 0px;
  background-color: #FFEF4C;
}

#header {
  background-color: #FF3578;
  height: 300px;
  transform: rotate(20deg);
}

<div id="header"></div>

我想摆脱那些黄色的张开，并希望标题 div 覆盖所有上部区域....但我不知道我有多愚蠢

标签： htmlcss

Answer 1

我想你想要这样的东西：

body {
  margin: 0px;
  background-color: #FFEF4C;
}

#header {
  background: 
    linear-gradient(to bottom left,#FF3578 49.5%,transparent 50%);
  height: 200px;
}

<div id="header"></div>