[英]Creating an Isoceles Trapezoid shape
I'm wondering if I could produce something similar to this with CSS: 我想知道是否可以用CSS生成类似的东西:
And I'm also wondering, is this the right place for such a question? 我也想知道,这是一个提出这个问题的正确地方吗? I have not tried anything codewise, I've done the brown images with photoshop.
我没有在代码上进行任何尝试,我已经用photoshop完成了棕色图像。
Thanks for any help ! 谢谢你的帮助 !
This shape (an Isoceles Trapezoid ) can be easily made using CSS3 by rotating a div
with a bit of perspective . 使用CSS3可以很容易地通过旋转带有一定角度的
div
来制作这种形状( 等腰梯形 )。
Explanation 说明
.container:after
) along the x-axis with a perspective. .container:after
)来获得形状。 div
because it would cause the link (and any other) text inside it also to be rotated. div
因为它会导致其中的链接(和其他任何文本)也旋转。 div
) to target only IE 7. div
)仅针对IE 7来实现与IE 8/9相同的行为。 body { font-family: Calibri; background: #5F4014; } .container { position: relative; width: 90%; text-align: center; margin: 50px 5px; } .container:after { position: absolute; content: '\\00a0'; width: 100%; left: 10px; top: 0px; padding: 10px; background: #4F0D00; box-shadow: inset 0px 0px 10px 2px #340800; border-top: 1px solid #715E49; -webkit-transform: perspective(25px) rotateX(-3deg); -moz-transform: perspective(25px) rotateX(-3deg); transform: perspective(25px) rotateX(-3deg); } a { position: relative; display: inline-block; color: white; text-decoration: none; width: 100px; text-align: center; padding: 10px; z-index: 2; } a:hover { color: gold; } a:active { color: #ff6767; }
<div class='container'> <a href='#'>Link 1</a> <a href='#'>Link 2</a> <a href='#'>Link 3</a> <a href='#'>Link 4</a> </div>
Screenshot - From browsers that support transforms 屏幕截图 -来自支持转换的浏览器
Screenshot - From browsers that don't support transforms (IE 8 and 9) 屏幕截图 -来自不支持转换的浏览器(IE 8和9)
Fiddle Demo | 小提琴演示 | JS Bin Demo - to check in IE < 9 which are not supported by JSFiddle.
JS Bin演示 -用于检入JSFiddle不支持的IE <9。
Yes, you can ! 是的你可以 ! There are a few way, but you would have to use CSS3, which isnt supported by old browser such as old IE versions !
有几种方法,但是您必须使用CSS3,旧浏览器(例如旧IE版本)不支持CSS3! (works in ie9+ I think).
(我认为在ie9 +中有效)。
You can see a good tutorial here : 您可以在这里看到一个很好的教程:
http://coursesweb.net/css/polygons-css_cs http://coursesweb.net/css/polygons-css_cs
(A way to do using CSS3 shaping) (一种使用CSS3整形的方法)
Or you could use this kind of code : 或者您可以使用这种代码:
<div class="left-corner"></div>
<div class="center>
<nav>
<ul>
<li><a href="blabla.html">First link</a></li>
<li><a href="blabla.html">Second Link</a></li>
</ul>
</nav>
</div>
<div class="right-corner"></div>
And use this tutorial to do one triangle left and right to do the corner 并使用本教程做一个三角形,左右做一个角
http://css-tricks.com/snippets/css/css-triangle/ http://css-tricks.com/snippets/css/css-triangle/
(like this) (像这样)
# -> ###################### -> #
# # -> # # -> # #
# # -> # # -> # #
###### -> ###################### -> #######
.Left-corner -> .center -> .right-corner
Be sure not to put no border on .center on right or left if you do it that way, and to put the same background-color to every divs. 如果这样做的话,请确保不要在.center的右侧或左侧放置任何边框,并为每个div设置相同的背景色。 I belive this method is better for accessibility !
我相信这种方法对可访问性更好!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.