1

Alright, here is the thing. This is what I'm trying to accomplish, which I did so far:

full height diagonal shape

The problem is I use hardcoded pixels right now, but it really needs to be more responsive. So it needs a height of 100% (not 200px like now). And the total width of the diagonal and content containers needs to be 50%, like the image above (so not hardcoded 100px like now). The main problem seems to be the diagonal, cause it almost seems I can only use pixels and not percentages. So if the content block gets more content, it will expand, but the diagonal will not, which is a problem.

It looks like a position absolute could fix it, but then I can't really place the content and diagonal blocks next to each other anymore. Now I gave them two different colors to be clear, but in the live example they need to look like one shape with the same background color.

.shape {
  width:400px;
  margin:0 auto;
  display: block;
  height: 200px;
  position: relative;
  background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSQdX7yx0pVXUlaNF7WkbSJpZp5r0TflV3WdsojKKK1Xon_1hh08l4OL1yd');
  
}
.diagonal {
  height:0;
  border-width: 0px 0 200px 100px;
  border-style:solid;
  border-color: transparent transparent transparent #d71f55 ;
  float: left;
  
}
.content {
  height: 100%;
  width: 100px;
  background-color: #888;
  float: left;
  color: #fff;
}
<div class="shape">
  <div class="content">
    Content goes here
    Like this
  </div>
  <div class="diagonal"></div>
</div>

EDIT:

By the way, I already tried using two backgrounds as well, like:

 background-color: #f87f73;
  background-image: -webkit-linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
  background-image: linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);

But that really got ugly. Too pixelated.

Edit 2:

Browser which needs to be supported:

  • OS: windows 8/10 : ** browsers: Chrome 47/48 ** Firefox 43/44 ** Internet Explorer 11

  • OS: mac OSX 10.9/10.10 ** Chrome 47/48 ** Firefox 43/44 ** Safari 8/9

  • OS: android 5/6 ** Chrome latest version

  • OS: iOS 8/9 ** Safari latest version

web-tiki
  • 99,765
  • 32
  • 217
  • 249
Erik van de Ven
  • 4,747
  • 6
  • 38
  • 80
  • May you use Javascript? – C.Schubert Feb 11 '16 at 09:36
  • Seems like a solution, but I would rather try to use CSS in the first place. If I cannot solve it with that, I would move forward to JavaScript. – Erik van de Ven Feb 11 '16 at 09:39
  • Added the browsers in my post. And well let's say 100% height of the wrapper container where I will place shape in. I probably want them the same height as the view port, but for now if I can give the wrapper the same height as the viewport, and the shape gets automatically the same height, I'm satisfied. – Erik van de Ven Feb 11 '16 at 09:50

2 Answers2

2

You can use viewport related units for the border as described in Shape with a slanted side (responsive). This will allow you to make the shape 50% width and 100% height of the viewport and responsive:

* {
  margin: 0;
  padding: 0;
}
.shape {
  width: 100%;
  margin: 0 auto;
  display: block;
  height: 100vh;
  position: relative;
  background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSQdX7yx0pVXUlaNF7WkbSJpZp5r0TflV3WdsojKKK1Xon_1hh08l4OL1yd');
}
.diagonal {
  height: 0;
  border-width: 0 0 100vh 25vw;
  border-style: solid;
  border-color: transparent transparent transparent #d71f55;
  float: left;
}
.content {
  height: 100vh;
  width: 25vw;
  background-color: #888;
  float: left;
  color: #fff;
}
<div class="shape">
  <div class="content">
    Content goes here Like this
  </div>
  <div class="diagonal"></div>
</div>

Viewport related units (vh and vw) have good browser support. For more info, see canIuse

Community
  • 1
  • 1
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • Thanks very much, didn't knew about vh and vw, great!. Uhm one thing, like I said I probably want them the same height as the viewport, but that's actually only before the user scrolls down. Guess I can't accomplish this with the above, can I? – Erik van de Ven Feb 11 '16 at 10:00
  • @ErikvandeVen I don't see what you mean exaclty but user can scroll further if you add content under the shape like this https://jsfiddle.net/aomdh8gt/ – web-tiki Feb 11 '16 at 10:03
  • Damn you are right. Thanks! Awesome. This helps me a lot. – Erik van de Ven Feb 11 '16 at 10:03
0

This is probably how I would approach it. Using a hard 50/50 gradient rather than a border makes it pretty trivial. It seems to render ok in chrome but I haven't checked other browsers. If you want this inside a container remember to set the container to position: relative

.shape {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    display: block;
    background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSQdX7yx0pVXUlaNF7WkbSJpZp5r0TflV3WdsojKKK1Xon_1hh08l4OL1yd');
}

.content {
    height: 100%;
    width: 25%;
    background-color: #888;
    color: #fff;
    float: left;
}

.diagonal {
    height: 100%;
    width: 25%;
    background: linear-gradient(to bottom right, #888 50%, transparent 50%);
    float: left;
    border: none;
}


<div class="shape">
  <div class="content">
    Content goes here Like this
  </div>
  <div class="diagonal"></div>
</div>
Ed'
  • 397
  • 2
  • 7