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

时间:2018-09-09 06:10:26

标签: html css

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

this is what i wanted to create

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

#header {
  background-color: #FF3578;
  height: 300px;
  transform: rotate(20deg);
}
<div id="header"></div>

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

2 个答案:

答案 0 :(得分:0)

我已通过在代码中添加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;起到了神奇作用。

答案 1 :(得分:0)

我想你想要这样的东西:

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

#header {
  background: 
    linear-gradient(to bottom left,#FF3578 49.5%,transparent 50%);
  height: 200px;
}
<div id="header"></div>