How to achieve the effect of the parallelogram layout shown below?
A, skewX limitations
Mention parallelogram, reflex like think of CSS transformin skew()/ skewX()/ skewY()method that allows chamfered element, thereby achieving the effect of a parallelogram
HTML as follows:
<div class="input-x">
<input class="input" placeholder="您的姓名">
</div>
CSS follows, the key is highlighted in red in the following form 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;
}
However, the start of a white background layout behind the only form a parallelogram, also the whole text layout according to a parallelogram format, if text is also applied skewX, all text will show an inclined, as shown below:
I was a text, I applied transform properties skewX, look at me now is how the performance of the sub ......
Our expectations should be upright text is displayed, but not like this inclination. We may first reaction was to reverse the text inside skewX, but that requires a separate process for each line of text, or processed for each character individually, some high cost, not very practical.
This is the skewXlimitations of the method, and that there is no other way to achieve the effect of a parallelogram layout of it? There can be achieved by means of CSS Shapes layout.
Small partners interested in the web front end to this technology can be added to our study circle, because I am not a 211, 985, just an ordinary undergraduate students, English is not particularly good, mathematics is not particularly good. So I chose the front end. Work sixth year, and I am glad he chose this path. 767-273-102 autumn dress. Share some learning methods, the details of combat development and we need to pay attention. From the zero-based front-end to learn how to start. Are a group of people with a dream, we may be in different cities, but we will walk together with the front tip of the tip
Two, CSS Shapes triangular layout
However, even if you are familiar with every CSS attribute CSS Shapes layout parallelogram layout effects here you do not get out it will be realized, because it needs a little reverse thinking.
The key to achieve CSS Shapes parallelogram parallelogram layout is not itself, but left and right corners of two triangles.
HTML is structured as follows:
<!-- 左三角 -->
<div class="shape-left"></div>
<!-- 右三角 -->
<div class="shape-right"></div>
<content class="content">
...内容...
</content>
We view the layout box, visible clues:
.shape-leftWhile left floating elements arranged shape-outsidein an inverted triangle, .shape-rightthe elements floating right and set shape-outsideto a positive triangular In this case, <content>elements which surround the text layout automatically in the remaining space, the layout of a parallelogram effect.
Relevant CSS code is as follows:
.shape-left {
float: left;
width: 200px; height: 500px;
/* 倒三角 */
shape-outside: polygon(0 0, 100% 0, 0% 100%);
}
.shape-right {
float: right;
width: 200px; height: 500px;
/* 正三角 */
shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}
.content {
display: block;
}
That effect is reached.
Implementation code is very simple, the key is thinking.
Third, the actual layout of the parallelogram
Irregularly shaped ads that arouse the user's attention, thereby improving the CTR.
So for parallelogram layout, left and right corners of the triangle vacancy just two triangles can be used to put advertisements, both full use of space, but also high returns.
Front-end development is usually not directly associated with the company's revenue, but not the same here, if you implement the new layout effects can significantly improve the company's revenue, proved your worth in this one, I believe you will be very performance Yes, you can try in the project.
However, the actual development time, display text more or less, go parallelogram is not appropriate, as it will lead to a small triangle, or the lower right corner of the triangle can not determine the location of the problem, therefore, is to achieve the recommended layout shape figure below like this.
IV Conclusion
After the encounter irregular layout, to a conditional reflex-like thinking --CSS Shapes layout.
CSS Shapes layout compatibility has been quite good, the mobile terminal can be assured. To avoid contamination very small part of the old phone, so we can deal with:
@supports (shape-outside: none) {
/* CSS Shapes相关代码写在这里 */
}
In this way, the phone is still a good old traditional layout block layout, most mobile phones can bring a delicious new layout.