0

I'm trying to create a layout with 3 divs side by side, fluid size (I'll handle small screen sizes separately), where the inner sides are slanted. It's supposed to be something like:

|_/_/_| or |_/_\_|

Either would be fine. I've tried the following, but I don't think it's the correct solution.

.holder .mainSelection {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 200px;
    border: 2px solid black;
}
.mainSelection .box {
    height: 100%;
    transform: skew(15deg);
    position: relative;
}
.mainSelection .box:nth-child(1) {
    background: #F40C42;
    margin-left: -30px;
    flex: 0 0 33%;
}
.mainSelection .box:nth-child(2) {
    background: #DBF408;
    flex: 0 0 34%;
    border-left: 2px solid black;
    border-right: 2px solid black;
}
.mainSelection .box:nth-child(3) {
    background: #58F40B;
    flex: 0 0 33%;
}
.mainSelection .box:nth-child(3):after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100%;
    background: #58F40B;
    -webkit-transform: skewX(-15deg);
    right: -50px;
}

The problem with the code above is that the 3rd div is bigger than the first two.

Can anyone suggest a better solution?

user1078494
  • 509
  • 1
  • 7
  • 22
  • related: https://stackoverflow.com/a/49289555/8620333 .. with 5 divs that you can easily change to 3 (reduce the number of div and there is a `5` to change to `3`) – Temani Afif Nov 22 '19 at 23:18
  • @TemaniAfif - thank you, that's a great solution. one thing tho - would you happen to know how to get the content centered in the outer divs? bcs, as is, and with 3 divs, my outer divs appear as 985px and the inner one is 687px, so the content in outer divs doesn't appear to be centered. well, they are, but based on 985px... – user1078494 Nov 22 '19 at 23:30
  • maybe add `margin:auto` to your div? – Temani Afif Nov 22 '19 at 23:33
  • @TemaniAfif sadly, no. I added a div with class .inner to each box and added margin:auto to it. firstly, the middle box is MUCH larger than the outer boxes, and content in larger boxes is still not centered. :( – user1078494 Nov 22 '19 at 23:41
  • share your code here: https://jsfiddle.net/ so I can have a look – Temani Afif Nov 22 '19 at 23:42
  • @TemaniAfif jsfiddle: https://jsfiddle.net/8e94okdt/ – user1078494 Nov 22 '19 at 23:49
  • 1
    it's due to the negative margin that you can rectify with padding: https://jsfiddle.net/4z0rme1c/ – Temani Afif Nov 22 '19 at 23:54
  • @TemaniAfif I tried something similar, but obviously not good enough. Would you please post this as a solution so I can accept it? Thanks! – user1078494 Nov 22 '19 at 23:59

0 Answers0