Search code examples
cssbackgroundangle

How to do this angle background by CSS?

enter image description here How can I achieve to get something like this? Can you help me?

Solution

  • You can achieve that with CSS.

    The idea is to have 3 blocs :

    1. a container (which will contain the image as background)
    2. an empty block which will be rotated to simulate the triangle
    3. a div wich will contain the text

    The idea is to rotate the empty block to get the angle you need. To create the "triangle" effect, we use the overflow:hidden on the container to act as a mask (you also need to make the rotated block bigger than hte container to cover it despite the rotation).

    Then you define the triangle & content blocks positions & z-index to superpose them.

    Note : You don't necessary have to put the image as the background of the container block. you can also display with an img tag and use z-index again to display the 3 blocks on top of each other.

    .container,
.rotated-block {
  display:block;
}

.container {
  background: #000000;
  width: 600px;
  height: 350px;
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.rotated-block {
  position: absolute;
  zi-index: 1;
  width: 100%;
  min-height: 150%;
  background: #FFFFFF;
  transform: rotate(-20deg);
  left: -40%;
  top: -7%;
}

.content {
  position: relative;
  z-index: 3;
  top: 35%;
  left: 10%;
}
    <div class="container">
    <div class="content">
        <p>Purly made with HTML & CSS</p>
     </div>
  <div class="rotated-block"></div>
</div>