Colin v. Lienden Colin v. Lienden - 2 months ago 6
CSS Question

How to create a div header angled at top of page

body margin&padding = 0;
the div goes out of the viewport

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

Answer

Wrap it in an other div and set overflow hidden

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>

Comments