CSS to achieve parallelogram layout effect

How to achieve the parallelogram layout effect shown in the figure below?

One, the limitations of skewX

Mention parallelogram, reflex like think of CSS  transformin skew()/ skewX()/ skewY()method that allows chamfered element, thereby achieving the effect of a parallelogram, e.g. parallelogram entry box results shown below:

The HTML is as follows:

<div class="input-x">
    <input class="input" placeholder="您的姓名">
</div>

The CSS is as follows, the key to the shape is highlighted in red below transform:skewX(-10deg):

.input-x {
    display: inline-block;
    position: relative;
    z-index: 0;
}
.input-x::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    border: 2px solid #ddd;
    background-color: #fff;
    border-radius: 4px;
    transform: skewX(-10deg);
    z-index: -1;    
}
.input {
    display: block;
    padding: 8px 10px;
    border: 0; background: none;
}

You can click here: CSS parallelogram input box demo

---

However, in the initial layout, not only did the white background behind form a parallelogram, the entire text content was also typeset according to the parallelogram format. If the text content is also applied skewX, all the text content will appear slanted, as shown below:

I am a piece of text. I applied the skewX in the transform property to see how my current performance is...

Our expectation should be that the text is displayed upright, not inclined like this. Our first reaction may be to reverse the text inside skewX, but that requires processing each line of text separately, or processing each character separately, which is expensive and impractical.

This is skewXthe limitation of the method. Is there any other method to achieve the layout effect of the parallelogram? Yes, it can be achieved with CSS Shapes layout.

Two, CSS Shapes layout and triangle

For the complete tutorial of CSS Shapes layout, please refer to the article I wrote before: " CSS shapes layout tutorial for myself ".

However, even if you are familiar with every CSS attribute of the CSS Shapes layout, you may not be able to achieve the parallelogram layout effect here, because you need a little reverse thinking.

The key to CSS Shapes to realize the parallelogram layout is not the parallelogram itself, but the two triangles in the upper left corner and the lower right corner.

You can click here: CSS Shapes to achieve parallelogram layout demo

The HTML structure is as follows:

<!-- Left triangle-->
<div class="shape-left"></div>
<!-- Right triangle-->
<div class="shape-right"></div>
<content class="content">
   ...content...
</content>

We check the layout box, we can see the clues:

 

.shape-leftThe left floating element is set shape-outsideto an inverted triangle at the same time , and the .shape-rightright floating element is set shape-outsideto a positive triangle at the same time . At this time, <content>the text content in the element is automatically set in the remaining space to form a parallelogram layout effect.

The relevant CSS code is as follows:

.shape-left {
    float: left;
    width: 200px; height: 500px;
    /* Inverted triangle */
    shape-outside: polygon(0 0, 100% 0, 0% 100%);
}
.shape-right {
    float: right;
    width: 200px; height: 500px;
    / * Regular triangle * /
    shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}
.content {
    display: block;
}

The effect is achieved.

The implementation code is very simple, the key is the idea.

3. Parallelogram layout and actual combat

Irregularly shaped advertisements can more attract users’ attention, thereby increasing ad click-through rates.

Therefore, for the parallelogram layout, the triangular vacancies in the upper left and lower right corners can be used to place two triangular advertisements, which not only makes full use of space, but also has high revenue.

Front-end development is usually not directly related to the company’s business revenue, but it is different here. If you achieve a novel layout effect that can greatly increase the company’s revenue, it proves your value in this area and believes that it will be very important to your performance. Yes, you can try it in the project.

However, in actual development, the displayed text content is more or less, it is not appropriate to go parallelogram, because it will cause the triangle to be very small, or the triangle position in the lower right corner cannot be determined. Therefore, the recommended layout shape is as shown below Like this.

Fourth, the conclusion

When you encounter irregular shape layouts in the future, you must have a conditioned reflection-like CSS Shapes layout.

The CSS Shapes layout compatibility is already pretty good, and the mobile terminal can be used with confidence. In order to avoid polluting very few old mobile phones, we can deal with it as follows:

@supports (shape-outside: none) {
   /* CSS Shapes related code is written here*/
}

In this way, the old mobile phones are still well laid out in the traditional block layout, and most mobile phones can enjoy the deliciousness of the new layout.

Above~ Thanks for reading!