html - 如何在页面顶部创建一个倾斜的 div 标题

Question

body margin&padding = 0; 

div 超出视口(viewport)

<div id="banner" style="    
height: 800px;
width: 100%;
transform: rotate(165deg);
background-color: #f00;
position: absolute;
top: -400px;
left: -50px;
"></div>

Answer 1

将其包裹在另一个div中并设置溢出隐藏

body{margin:0}

<div style="position: relative; width: 100%; height: 300px; overflow: hidden; ">
  <div id="banner" style="    
                          height: 500px;
                          width: 200%;
                          transform: rotate(165deg);
                          background-color: #f00;
                          position: absolute;
                          top: -400px;
                          left: -100px;
                          "></div>
  </div>