[英]Create a 'trapezium' shaped div with Clipped overflow
Im wondering if anybody know if at all possible, how to create a trapezium using CSS/Html/Canvas. 我想知道是否有人知道如果可能的话,如何使用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... 继承人我的jsFiddle ...
http://jsfiddle.net/Liamatvenn/WWYYM/ http://jsfiddle.net/Liamatvenn/WWYYM/
I can do it with 2 extra divs as wrappers. 我可以用2个额外的div作为包装器。
CSS 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;
}
i don`t know what you want. 我不知道你想要什么。 so i guess this will help you little.
所以我想这会对你有所帮助。
div {
width:0;
margin-left:-100px;
height:100px;
border-right:100px solid lightblue;
border-top:60px solid transparent;
border-bottom:60px solid transparent;
padding-left:100px;
white-space:no-wrap;
}
Are you speaking for something like this please ? 你在说这样的话吗? Check this fiddle: jsfiddle.net/WWYYM/3/ .
检查这个小提琴:jsfiddle.net/WWYYM/3/。 Let me know if it works for you.
请让我知道这对你有没有用。 I have edited your code like the following:
我编辑了你的代码,如下所示:
div {
border-bottom: 100px solid lightblue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 500px;
white-space:no-wrap;
text-align:center;
}
you can addition transform alike below: 你可以在下面添加变换:
div { width:0; margin-left:-50px; margin-top: -500px; height:100px; border-right:100px solid lightblue; border-top:60px solid transparent; border-bottom:60px solid transparent; padding-left:1000px; white-space:no-wrap; transform:rotate(20deg); -ms-transform:rotate(20deg); /* IE 9 */ -webkit-transform:rotate(90deg);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.