K-Dawg K-Dawg - 2 months ago 10
CSS Question

Cutting a div with a background image diagonally

I am trying to create a website that utilizes the diagonal sections look. I am trying to get this kind of angle.

I also need full browser support. I've seen a lot with the polygon fix, and I've tried rotating the div but it extends my browser width and leaves the top with random white space. If anyone can help out that would be amazing. If you need any clarification please let me know.



.shape {
width:400px;
margin:0 auto;
}
.top {
height:0;
border-width:0 0 100px 400px;
border-style:solid;
border-color:transparent #d71f55 #d71f55 transparent;
}
.bottom {
height: 0px;
background-color:#d71f55;
}

/* Support transparent border colors in IE6. */
* html .top {
filter:chroma(color=#123456);
border-top-color:#123456;
border-left-color:#123456;
}

<div class="shape">
<div class="top"></div>
<div class="bottom"></div>
</div>




Answer

The code in this example only works in "modern" browsers, but if you add browser prefixes I believe can work back to IE9. It uses a rotated div as the "cut", but puts that div in an overflow: hidden container so that you don't get the whitespace you were talking about.

.wrapper {
  background: url(http://placehold.it/400/400/);
  width: 400px;
  height: 400px;
  overflow: hidden;
  border: 10px solid black;
  position: relative;
}

.cut {
  background: #fff;
  position:absolute;
  top: 300px;
  left: -50px;
  width: 500px;
  height: 300px;
  transform-origin: center top;
  transform: rotate(8deg);
}
<div class="wrapper">
  <div class="cut">
  </div>
</div>

Comments