"cut" a div diagonally using css

Question

I'm trying to "cut" a div diagonally after some space. It's very difficult to explain. It should look like this:

As you cann see, there is a blue parent div in the back with a white child div inside. The white div will be the same width as the parent div, but it will be "cutted" diagonally after some pixels (e.g. after 100px). I never did something like this, but I thought it could maybe done in CSS3 using transition or rotation or something like this (I don't know, I'm not familiar with CSS3).

I searched for diagonal divs but I only got results like this. Unfortunately I know nothing to do with it. Is this even possible? Can you please give me some hints?

Jules Lamur · Accepted Answer · 2016-05-09T20:29:39.913

Use border colors to display a diagonally cut div.

Combine it with ::after to use only one div.

.background {
  background-color: #5555AA;
  padding-top: 15px;
}
.content {
  position: relative;
  background-color: white;
  height: 30px;
  line-height: 30px;
  padding: 0 100px 0 200px;
  display:inline-block;
}
.content::after {
  position: absolute;
  right: -50px;
  content: "";
  border-bottom: 25px solid white;
  border-left: 25px solid white;
  border-top: 25px solid transparent;
  border-right: 25px solid transparent;
}

<div class="background">
  <div class="content">KONTAKT</div>
</div>

Works like a charm, thank you very much :) – Tyler May 09 '16 at 20:42 — Tyler, May 09 '16 at 20:42

"cut" a div diagonally using css

1 Answers1