CODEWITHSUNDEEP
htmlcss
techno bisuit
techno bisuit

Reputation: 83

How to change the size or the shape of the div.\

Hi im a newbie in designing website i just want to ask how can i achieve this without using images ? please check this image thanks click here what im trying to accomplish is the black box with that kind of shape

Html + css 

<div class="box side"> 


</div>

.box.side {
background-color: #131313;
height: 100vh
}

Upvotes: 0

Views: 728

Answers (1)

Dalin Huang
Dalin Huang

Reputation: 11342

This should help you get started:

Basically, you create a div block then rotate it a little bit, with margin and transform-origin you can make it fit the window (search online if you don't know how to use those attribute)

You also need a container which is block, width 100% and overflow hidden, otherwise, you will see a rotated div block.

.box.side {
  margin-top: 48vh;
  height: 48vh;
}

.container {
  display: block;
  width: 100%;
  overflow: hidden;
}

.slope {
  margin: 0 -100px;
  transform-origin: right center;
  background: black;
  transform: rotate(-2deg);
}
<div class="container">
  <div class="box side slope">
  </div>
</div>

Upvotes: 1

Related Questions