All geek questions in one place

Make a specific trapezoidal shape in pure css

Suppose I have two divs, as (beautifully) shown below. I already looked at CSS Forms , but I did not find out exactly how the yellow shape in the bottom image can be made. Is it possible to make the yellow form in the same way as described in the link above.

trapezoidal shape

Or even, now we are on this question, the ideal situation will be described in the picture below. Is this possible in css or using some other tools? (Note that the curves in the picture are not perfect, but maybe a standard bezier curve with a variable height will work?)

Final

+5
source share
2 answers

For the second part of the question, you can create SVG clip paths and then reference the id in css. You can see the SVG at the bottom of the HTML.

-webkit-clip-path: url(#top-path); clip-path: url(#top-path);

Here you will find more detailed information about all methods: https://css-tricks.com/clipping-masking-css/

But remember that clip-path support is currently quite limited.

http://caniuse.com/#search=clip-path

 div { float: left; height: 100px; width: 130px; } .holder { position: relative; } .top { width: 490px; } .bottom { width: 490px; position: absolute; left: 0; top: 35px; } .top-left { background-color: aquamarine; height: 35px; } .top-mid { background-color: aquamarine; width: 97px; -webkit-clip-path: url(#top-path); clip-path: url(#top-path); } .top-right { background-color: aquamarine; margin-top: 37px; height: 53px; } .bottom-left { background-color: aqua; height: 34px; } .bottom-mid { background-color: aqua; width: 97px; -webkit-clip-path: url(#bottom-path); clip-path: url(#bottom-path); } .bottom-right { background-color: aqua; margin-top: 55px; height: 45px; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG Clip Path Shape</title> </head> <body> <div class="holder"> <div class="top"> <div class="top-left"></div> <div class="top-mid"></div> <div class="top-right"></div> </div> <div class="bottom"> <div class="bottom-left"></div> <div class="bottom-mid"></div> <div class="bottom-right"></div> </div> <svg width="0" height="0"> <defs> <clipPath id="bottom-path"> <path d="M14.966,0.68L0,0v33.113l14.966,0.68c29.252,2.041,55.102,70.509,76.068,70.503l6.245-0.32V54.864 l-6.245,0.32C70.068,55.189,44.218,2.721,14.966,0.68z" /> </clipPath> </defs> </svg> <svg width="0" height="0"> <defs> <clipPath id="top-path"> <path fill="#E30613" d="M88.763,36.612C59.511,33.053,45.639,0,13.327,0C9.346,0,0,0,0,0v33.113v1.622l14.966,0.68 c29.252,2.041,55.102,54.509,76.068,54.503l6.245-0.32V69.847V36.735L88.763,36.612z" /> </clipPath> </defs> </svg> </div> </body> </html>

For the first part of the question, we can use clip-path , each of the angular coordinates is separated by a comma.

 -webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%); clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%); 

 div { float: left; height: 100px; width: 130px; } .holder { position: relative; } .top { width: 490px; } .bottom { width: 490px; position: absolute; left: 0; top: 43px; } .top-left { background-color: aquamarine; height: 43px; } .top-mid { background-color: aquamarine; -webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%); clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%); } .top-right { background-color: aquamarine; margin-top: 20px; height: 80px; } .bottom-left { background-color: aqua; height: 43px; } .bottom-mid { background-color: aqua; -webkit-clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 43%); clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 43%); } .bottom-right { background-color: aqua; margin-top: 43px; height: 57px; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Shape</title> </head> <body> <div class="holder"> <div class="top"> <div class="top-left"></div> <div class="top-mid"></div> <div class="top-right"></div> </div> <div class="bottom"> <div class="bottom-left"></div> <div class="bottom-mid"></div> <div class="bottom-right"></div> </div> </div> </body> </html>
+3
source

Here is the first form in pure css. You need to use perspective .

 .shape { display: flex; margin: 50px; } .red, .green { color: white; padding: 15px; box-sizing: border-box; } .green { background: green; position: relative; z-index: 2; width: 200px; height: 127px; margin-top: 45px; margin-left: -22px; } .red { width: 100px; background: red; height: 56px; z-index: 2; } .parent { position: relative; -webkit-perspective: 711px; perspective: 711px; margin-left: -30px; margin-top: 19px; } .el { width: 200px; -webkit-transform: rotateX(-27deg) rotateY(-40deg); transform: rotateX(-27deg) rotateY(-40deg); height: 65px; background: #FFF200; position: relative; perspective: 350px; -webkit-perspective: 350px; } .el:after { content: ''; position: absolute; left: 0; top: 100%; border-style: solid; border-width: 0 200px 70px 0; border-color: transparent #FFF200 transparent transparent; } 
 <div class="shape"> <div class="red">Div 1</div> <div class="parent"> <div class="el"></div> </div> <div class="green">Div 2</div> </div>
+3
source

Source: https://habr.com/ru/post/1258287/

More articles:


All Articles