Tell me how to mark up a rectangular trapezoid

image
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?
October 3rd 19 at 04:29
4 answers
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
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
October 3rd 19 at 04:35
Here you have for the future: css-tricks.com/examples/ShapesOfCSS/
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

Find more questions by tags CSSHTML