-1

I wanted to make a div colord pink and i want it to be tilted to the right but when i did it the div didn't take 100% of the width of the sreen. I also made the body magin and padding 0 but it still doesn't work

<html>
<div class="parent">
   <div class="backgroundColor"><div>
</div>
</html>

<css>
    .body{
       margin: 0px;
       padding: 0px;
     }

    .backgroundColor{
       width: 100%;
       height: 160px;
       margin: 100px 0px 0px 0px;
       background-color: pink;
       transform: rotate(-9deg);
    }
<css>

When i did this the top-right and bottom-left corner of the div didn't fill the whole screen. How can i make the corners fill the whole width of the screen without adding a scrollbar at the bottom of the screen?

Jasir Limani
  • 3
  • 4
  • what is your expected result? Can you share you demo link? – vadivel a Dec 13 '22 at 16:07
  • html, body { margin: 0; } resets the default margins – Johannes Dec 13 '22 at 16:26
  • no i mean can i make the div fully touch the sides of the screen not just the bottom-right and the top-left corners without adding a scroll bar at the bottom of the screen – Jasir Limani Dec 13 '22 at 21:49
  • https://9elements.com/blog/content/images/2020/02/03-4.png something like this but the top-right and bottom-left corners didn't touch the sides of the screen – Jasir Limani Dec 13 '22 at 21:52

2 Answers2

0

to avoid scroll bar, use style="overflow: hidden;" on body tag

jayaraj
  • 19
  • 5
0

Can you try this html and css

<div class="bg"></div>

.bg {
width:100%;
height:300px;
background-color:red;
-webkit-clip-path: polygon(0 39%, 100% 14%, 100% 28%, 100% 45%, 0 68%);
clip-path: polygon(0 39%, 100% 14%, 100% 28%, 100% 45%, 0 68%);}
vadivel a
  • 1,754
  • 1
  • 8
  • 18