Tell me how to mark up a rectangular trapezoid

Question

Tell me how to mark up a rectangular trapezoid

I tried to do 2 diva one rectangular second tilted -webkit-transform: skew, but then can't make the fill and inner shadow, tell me how to do it? surely only the image remains?

evert.Pagac asked October 3rd 19 at 04:29

More answers about "Tell me how to mark up a rectangular trapezoid"

4 answers

arnold.Erdman55 answered on · Answer 1 · 2019-10-03T04:31:52.828Z

arnold.Erdman55 answered on October 3rd 19 at 04:31

#trapezoid {
 border-bottom: 100px solid red;
 border-left: 50px solid transparent;
 border-right: 0;
 height: 0;
 width: 200px;
}

hurry... - evert.Pagac commented on October 3rd 19 at 04:34

Yeah, it looks like a trapezoid: dabblet.com/gist/6099128 - houston.Stoke commented on October 3rd 19 at 04:37

allow yourself to adjust the previous meeting.



<style>
.test {
 border-bottom: 100px solid red;
 border-left: 50px solid transparent;
 border-right: 0;
float:left;
 height: 0;
 width: 200px;
}
.test1 {
 border-bottom: 100px solid transparent;
 border-left: 50px solid red;
 border-right: 0;
 height: 0;
float:left;
 width: 100px;
}
</style>
<div class="test">
</div>
<div class="test1">
</div>

- Casandra_Kutch commented on October 3rd 19 at 04:40

Please read the question carefully... not only the title... - evert.Pagac commented on October 3rd 19 at 04:43

ops. sprinkle ashes, to mix a trapezoid and a parallelogram — must try.



<style>
.test {
 border-bottom: 100px solid red;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 height: 0;
 width: 100px;
}
</style>
<div class="test">
</div>

- Casandra_Kutch commented on October 3rd 19 at 04:46

dominique.Croo answered on · Answer 2 · 2019-10-03T04:33:52.829Z

dominique.Croo answered on October 3rd 19 at 04:33

Two-dimensional transformations trapezoid is not done. The maximum that they can do a box. Just a 3D conversion, if they will suit you (the prospect still):
dabblet.com/gist/6099784

So like the Asker wants a shadow. - evert.Pagac commented on October 3rd 19 at 04:36

camren.Wintheiser answered on · Answer 3 · 2019-10-03T04:35:52.829Z

camren.Wintheiser answered on October 3rd 19 at 04:35

Here you have for the future: css-tricks.com/examples/ShapesOfCSS/

Victoria16 answered on · Answer 4 · 2019-10-03T04:37:52.829Z

Victoria16 answered on October 3rd 19 at 04:37

Impossible to force CSS to do what you need (one geometric figure).
But if you start as you did, that shifts elements and shadows to get the two DIVS plausible option.
Ozvuchte the task entirely.

what is there to announce, we should do what is in the picture... but realized that no pictures neoboytis - evert.Pagac commented on October 3rd 19 at 04:40

To do as the picture you offered at least 3 different solutions. You also need some kind of shade? - houston.Stoke commented on October 3rd 19 at 04:43

Everything turned out the user SelenIT2 shadow I added, thank you ), for your option also, you can easily add a shadow using box-shadow: inset 0px 0px 150px rgba(0,0,0,0.5); and all right! - Casandra_Kutch commented on October 3rd 19 at 04:46