Question

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

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

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

我想摆脱那些黄色的空白，并希望页眉div覆盖所有上部区域。...但我不知道我有多么愚蠢

Answer 1

我已通过在代码中添加margin属性来解决此问题，请检查以下内容：

<html>

<head>
  <style>
    body {
      margin: 0px;
      background-color: #FFEF4C;
    }
    
    #header {
      background-color: #FF3578;
      height: 300px;
      margin-top: -30px;
      transform: rotate(20deg);
    }
  </style>
</head>

<body>

  <div id="header"></div>

  <body>

</html>

请注意，margin-top: -30px;起到了神奇作用。

Answer 2

我想你想要这样的东西：

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

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

<div>元素样式，使其具有旋转和倾斜效果

2 个答案: