Im wondering if anybody know if at all possible, how to create a trapezium using CSS/Html/Canvas.
I've tried to sort of hash one together only its very messy and would be unusable in the real world.
div {
width:0;
margin-left:-1000px;
height:100px;
border-right:1000px solid lightblue;
border-top:60px solid transparent;
border-bottom:60px solid transparent;
padding-left:1000px;
white-space:no-wrap;
}
Heres my jsFiddle...
http://jsfiddle.net/Liamatvenn/WWYYM/
I can do it with 2 extra divs as wrappers.
CSS
.trapezium {
position: absolute;
left: 40px;
top: 40px;
width: 300px;
height: 200px;
-webkit-transform: skewY(6deg);
overflow: hidden;
}
.trapezium > div {
background-color: yellow;
position: absolute;
left: 0px;
top: 50px;
width: 300px;
height: 200px;
-webkit-transform: skewY(-12deg);
overflow: hidden;
}
.trapezium > div > div {
font-size: 60px;
background-color: yellow;
position: absolute;
left: 0px;
top: -30px;
width: 300px;
height: 200px;
-webkit-transform: skewY(6deg);
overflow: hidden;
}
demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With