Fix skewed Flexboxes

Question

i need to do an website with skewed css design. The goal is some similar design:

and my Result after some coding is the following:

in the black box you can see the problem: the ABC containers arent in the right positions. How i am able to fix that?

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  font-family: sans-serif;
  font-size: 20px;
}

a {
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 30px;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  color: white;
}

.flex-container {
  display: flex;
  align-self: left;
  flex-direction: row;
  width: 70%;
  height: 100%;
  background-color: white;
  overflow: hidden;
  flex-wrap: wrap-reverse;
  float: right;
}

.flex-content {
  transform: skew(-5.5deg);
  background-color: red;
  height: 33%;
  text-align: center;
  width: 45%;
  margin: 5px 5px 5px 50px;
  display: flex;
  align-items: center;
}

.underlay-box {
  position: absolute;
  width: 20%;
  height: 100%;
  background-color: red;
}

.overlay-box {
  width: 30%;
  height: 100%;
  background-color: red;
  transform: skew(-5.5deg);
  float: left;
}

.gmk {
  height: 100%;
  width: 100%;
  border: 2px red solid;
  /*background: url('bild1.jpg'); */
  background-size: cover;
}

<div class="underlay-box"></div>
<div class="overlay-box"></div>
<div class="flex-container">
  <div class="flex-content">
    <div class="gmk"><a href="mediothek.html">A</a></div>
  </div>
  <div class="flex-content"><a href="mediothek.html">B</a></div>
  <div class="flex-content"><a href="mediothek.html">C</a></div>
  <div class="flex-content"><a href="mediothek.html">D</a></div>
  <div class="flex-content"><a href="mediothek.html">E</a></div>
  <div class="flex-content"><a href="mediothek.html">F</a></div>
</div>

i would appreciate any help :) Thank you, Jonas

Gabriele Petrioli · Accepted Answer · 2017-12-18T23:31:46.860

I believe the better approach would be to apply the skew on the .flex-container.

The basic problem is that you are skewing each element on its own so it is skewed in-place. Skewing the container will allow its contents to be skewed as well while following the the outer shape.

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height:100%;
  font-family: sans-serif;
  font-size: 20px;
}
a {
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 30px;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  color: white;
}

.flex-container {
  display: flex;
  align-self: left;
  flex-direction: row;
  width: 70%;
  height: 100%;
  background-color: white;
  overflow: hidden;
  flex-wrap: wrap-reverse;
  float: right;
  transform: skew(-5.5deg);
}

.flex-content {
  background-color: red;
  height: 33%;
  text-align: center;
  width: 45%;
  margin: 5px 5px 5px 15px;
  display: flex;
  align-items: center;
}

.underlay-box {
  position: absolute;
  width: 20%;
  height: 100%;
  background-color: red;
}

.overlay-box {
  width: 30%;
  height: 100%;
  background-color: red;
  transform: skew(-5.5deg);
  float: left;
}

.gmk {
  height: 100%;
  width: 100%;
  border: 2px red solid;
  /*background: url('bild1.jpg'); */
  background-size: cover;
  box-sizing:border-box;
}

<div class="underlay-box"></div>
<div class="overlay-box"></div>
<div class="flex-container">
  <div class="flex-content">
    <div class="gmk"><a href="mediothek.html">A</a></div>
  </div>
  <div class="flex-content"><a href="mediothek.html">B</a></div>
  <div class="flex-content"><a href="mediothek.html">C</a></div>
  <div class="flex-content"><a href="mediothek.html">D</a></div>
  <div class="flex-content"><a href="mediothek.html">E</a></div>
  <div class="flex-content"><a href="mediothek.html">F</a></div>
</div>

score 2 · Answer 2 · 2017-12-18T23:28:29.327

2

Changes made:

Skew the flex-container instead of skewing each and every element.
Use skewX() instead of just skew().
Calculate the flex-basis of the component by reducing the border size and from the divison width of each flex item.
Just make use of the underlay-box for the left panel by skewing it and translating it to -5% to the left side.
Increase the width of flex container so it overflows the body to the right.
Hide, the overflow-x of the body tag to disable scrolling.

html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  font-family: sans-serif;
  font-size: 20px;
  overflow-x:hidden;
}

a {
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 30px;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  color: white;
}

.flex-container {
  display: flex;
  align-self: left;
  flex-direction: row;
  width: 80%;
  height: 100%;
  transform: skewX(-5.5deg);
  background-color: white;
  overflow: hidden;
  flex-wrap: wrap-reverse;
  position: absolute;
  left: 25%;
  
}

.flex-content {
  background-color: red;
  border:2px solid black;
  flex: 0 1 calc(32% - 2px);
  display: flex;
  align-items: center;
  text-align: center;
}

.flex-content:hover{
background-color:gray;
transition:all 0.3s ease-in-out;
}

.underlay-box {
  position: absolute;
  left: -5%;
  width: 30%;
  height: 100%;
  background-color: red;
  transform: skewX(-5.5deg);
}

.gmk {
  height: 100%;
  width: 100%;
  border: 2px red solid;
  /*background: url('bild1.jpg'); */
  background-size: cover;
}

<div class="underlay-box"></div>
<div class="overlay-box"></div>
<div class="flex-container">
  <div class="flex-content">
    <div class="gmk"><a href="mediothek.html">A</a></div>
  </div>
  <div class="flex-content"><a href="mediothek.html">B</a></div>
  <div class="flex-content"><a href="mediothek.html">C</a></div>
  <div class="flex-content"><a href="mediothek.html">D</a></div>
  <div class="flex-content"><a href="mediothek.html">E</a></div>
  <div class="flex-content"><a href="mediothek.html">C</a></div>
  <div class="flex-content"><a href="mediothek.html">D</a></div>
  <div class="flex-content"><a href="mediothek.html">E</a></div>
  <div class="flex-content"><a href="mediothek.html">F</a></div>
</div>

edited Dec 18 '17 at 23:28

answered Dec 18 '17 at 23:18

Can you explain what you did differently, please? – Blazemonger Dec 18 '17 at 23:21
@Blazemonger Still editing the post, for explanataion. I don't know what's the reason for vote down lol? – Dec 18 '17 at 23:23
2

Always expect downvotes when posting code without at least briefly explaining what the code does. [so] is not a *"code for OP for free"* website, and by this behavior you are lowering the quality of the website, overall. Your answer is supposed to *illuminate* all future users on how to fix this type of problem. Not to provide a custom solution for the particular case of the OP. Note: since you briefly explained, I retracted my downvote, but you got down-voted by someone else too. It's better to layout the principle first and post the code later than the other way around. – tao Dec 18 '17 at 23:29
@AndreiGheorghiu I think it's not preferred to just go about and say this is how you do it but rather than first asking the OP if this is exactly what they required? If they did, then we can explain the changes made else further modifications have to be made. So, yeah in before people get in the hurry of downvoting other's answers even if its valid just because they can't be patient, I don't think it's the OP's or the solver's fault. The question hasn't been even posted more than half hour ago and there's a timeframe everyone requires to know its upto the OP's expectation. – Dec 18 '17 at 23:31
2

I had the same problem you're having when I started on SO. I'd post fully working solutions and they'd get downvoted for not having any explanation. I learned, in time, the help you give to 1000 future visitors is a lot more important than the help to the person asking the question. If their question is too localized (and won't help future visitors), just tell them so and move on. Please consider reading and applying [answer]. Thank you. – tao Dec 18 '17 at 23:36
@AndreiGheorghiu Thank you for the reference but I already have read it. If someone has to downvote they do it without any regards. And this isn't the first time or only scenario on which people downvoted. Sure, this might not be fully explained at the time it recieved the downvotes, but what about the ones which were? But yeah, thank you anyways for retracting yours. – Dec 18 '17 at 23:38
I remember down-voting one of your answers a few days ago and you deleted it before I had a chance of explaining the reason (which was the same as above). Most times down-voters are well intended and (at least from their perspective) they do it as they believe your answer is detrimental to SO community. Also, most times, they will let you know the reason of the downvote, if given the opportunity. Overall, having a bit of patience here pays off. You're welcome (to SO)! – tao Dec 18 '17 at 23:47
@AndreiGheorghiu Yeah, I had been commenting after getting a downvote to whoever did it, to give a feedback or explain the reason for it. But guess what? Like you said, it's their perspective, but it'd be appreciated if the ones who did make an effort to downvote, could make an effort to describe their perspective for the downvote as well :) P.S - Not one explained or replied. – Dec 18 '17 at 23:50
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/161483/discussion-between-andrei-gheorghiu-and-highdef). – tao Dec 18 '17 at 23:51

Fix skewed Flexboxes

2 Answers2