我想知道是否可以用 CSS 生成类似的东西：
我也想知道，这是提出这样问题的合适地方吗？我没有尝试过任何代码，我已经用 Photoshop 完成了棕色图像。
谢谢你的帮助 ！
这个形状（一个等腰梯形 http://en.wikipedia.org/wiki/Isosceles_trapezoid）可以使用CSS3通过旋转a轻松制作div有一点看法 https://developer.mozilla.org/en-US/docs/Web/CSS/perspective.
解释
- 该形状是通过旋转绝对定位的伪元素来实现的（
.container:after）沿 x 轴透视。
- 我们没有旋转实际的容器
div因为它会导致其中的链接（以及任何其他）文本也被旋转。
- 顶部边框和插入框阴影用于完全模仿相关图中所示的形状。顶部边框产生顶部具有较浅阴影的线条，而插入阴影则产生形状周围的深色边缘。
- 由于较低版本的 IE 不支持旋转变换，因此该形状不会出现在 IE
- IE 7 不支持伪元素，因此即使该框也不会出现，但链接会按原样显示。但是，通过添加条件 CSS（向容器添加背景和阴影）可以实现与 IE 8/9 中相同的行为
div) 仅针对 IE 7。
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>
截屏- 来自支持转换的浏览器
截屏- 来自不支持转换的浏览器（IE 8 和 9）
小提琴演示 http://jsfiddle.net/hari_shanx/m0x5m23j/ | JS Bin 演示 http://jsbin.com/xiberenese/1/- 检查 JSFiddle 不支持的 IE
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
