嗨,我想知道如何使用元素和CSS重新创建图像中标头部分的倾斜样式?
body {
margin: 0px;
background-color: #FFEF4C;
}
#header {
background-color: #FF3578;
height: 300px;
transform: rotate(20deg);
}
<div id="header"></div>
我想摆脱那些黄色的空白,并希望页眉div覆盖所有上部区域。...但我不知道我有多么愚蠢
答案 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>