0

I've got a mockup for a website which has a hero section consisting of two sections, split diagonally at the same angle. The two sections have content and need to scale to fit the content.

I have tried the method described here: two divs split with diagonal line - CSS but it doesn't work well with content; adding text to the div just extends the rectangle not the triangle. How do I get the boxes to scale with the content?

I would post a comment but I don't have the reputation :/

EDIT: by scaling to content, I mean that the if I add content to one of the divs, the div should be able to fit all of the content inside of it. Both of the divs would need to be the same height. Apologies for any confusion :)

Ben Tomsett
  • 1
  • 2

1 Answers1

0

The question is not so clear as to :

scaling to content

I suppose it means that it should keep the same aspect after window resize (??).

// Create a flex container
.hero {
  display: flex;
  height: 500px;
  width: 100%;
  flex-flow: row nowrap; // make the two divs side by side
  font-size: 2em;
  color: white;
  font-family: sans-serif;
  position: relative;
}

// apply basic styles to the divs
.hero div{
  display: flex;
  position: relative;
  background-color: tomato;
  width: 50%;
  padding: 50px;
}

// + 100px for :after and :before to fit
// + 10px for the space we really want to see between diagonal
.hero div:first-child{
  margin-right: 110px;
}

.hero_1:after, .hero_2:before{
  content:'';
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}

// Add a triangle at the end and starts of both divs to simulate diagonal
.hero_1:after {
    left: 100%;
    border-top: 500px solid tomato;
    border-right: 100px solid transparent;
}
.hero_2:before {
    right: 100%;
    border-bottom: 500px solid tomato;
    border-left: 100px solid transparent;
}

Please have a look to this codepen. The split is made with a diagonal line, and it fits to window resizes.

If it's not the desired effect, please edit the question to be more explicit about "scaling to content" I'll be happy to help.

Jona Rodrigues
  • 992
  • 1
  • 11
  • 23
  • Apologies, please see my edit. You're solution seems to be the one that works the best, but I can't for the life of me get them to scale to content. Would JS be useful here to set the size of the triangle to the size of the main div? – Ben Tomsett Nov 15 '17 at 22:32
  • Ok, but what kind of content do you have ? Only text ? Images ? Both ? Do you need the two section to just grow taller depending on the other section (like if hero_1 grows at 1000px height, so should hero_2) ? or it should as well grow larger (like hero_1 could be of 20px width while hero_2 occupies say 1000px width) ? – Jona Rodrigues Nov 15 '17 at 22:44
  • Also, after thought, if divs grow taller, should the white diagonal keep the same angle ?! – Jona Rodrigues Nov 15 '17 at 23:04
  • Text and images ideally. Both of them need to be the height of the largest div, and we could live without the angle being the same. Also, would it be possible to get any text to fill the entire shape including wrapping to the triangle? – Ben Tomsett Nov 16 '17 at 15:22
  • I can think of something for both heights being equal. However, I am afraid making text fit until even the triangle is NOT possible as it is another element and text cannot span across two elements. Now if your use-case could be more detailed, I could come up with a solution for you. In fact, how is it needed for you to separate the two divs ? Is it viable to give the illusion that there are two separate shapes by just creating a white div tilt in the middle of one big red `.hero` ? – Jona Rodrigues Nov 16 '17 at 15:45
  • This is the mockup I have been given https://imgur.com/a/ue4nx The single div with a divider is a good one, I haven't thought of that, however the client stressed the need for the shadows under the divs, which might not be possible with the divider – Ben Tomsett Nov 17 '17 at 16:34
  • Wow ! This is quite another level ! The only way I could suggest is to make two left and right simple divs. Then create an absolute white div in the middle that would represent the diagonal. This "tilted diagonal white div" could eventually have shadows on its right to match the design. Now regarding the text, this is a whole other story. Simply put: it is possible but not quite well supported. New browsers have a special `shape-outside` CSS property that can make your text fit shapes [here](https://css-tricks.com/almanac/properties/s/shape-outside/). – Jona Rodrigues Nov 18 '17 at 18:17