创建等腰梯形

Question

我想知道是否可以使用 CSS 生成类似的东西：

我也想知道，这是否适合提出这样的问题？我没有在代码方面尝试过任何东西，我已经用 Photoshop 完成了棕色图像。

感谢您的帮助！

Answer 1

这个形状（一个Isoceles Trapezoid）可以很容易地使用CSS3通过旋转div和一点perspective来制作。

说明

1. 形状是通过沿 x 轴以透视图旋转绝对定位的伪元素 (.container:after) 来实现的。
2. 我们不会旋转实际容器 div，因为它会导致其中的链接（和任何其他）文本也被旋转。
3. 顶部边框和插入框阴影用于完全模仿相关图中所示的形状。顶部边框产生顶部阴影较浅的线条，而嵌入阴影产生形状周围的深色边缘。
4. 由于较低版本的 IE 不支持旋转转换，因此形状不会出现在 IE
5. IE 7 不支持伪元素，因此即使是框也不会出现，但链接会按原样显示。但是，可以通过添加条件 CSS（将背景和阴影添加到容器 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>

屏幕截图 - 来自支持转换的浏览器

屏幕截图 - 来自不支持转换的浏览器（IE 8 和 9）

Fiddle Demo | JS Bin Demo - 检入 JSFiddle 不支持的 IE

Answer 2

是的，你可以！有几种方法，但你必须使用 CSS3，旧浏览器不支持，如旧 IE 版本！ （我认为适用于 ie9+）。

你可以在这里看到一个很好的教程：

http://coursesweb.net/css/polygons-css_cs

（一种使用 CSS3 整形的方法）

或者你可以使用这种代码：

<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>

并使用本教程做一个三角形左右做角

http://css-tricks.com/snippets/css/css-triangle/

（像这样）

      #         ->  ######################   ->   # 
    # #         ->  #                    #   ->   #  #
  #   #         ->  #                    #   ->   #    #
 ######         ->  ######################   ->   #######   
.Left-corner    ->  .center                  ->  .right-corner

如果你这样做，请确保不要在 .center 的右侧或左侧设置任何边框，并为每个 div 设置相同的背景颜色。我相信这种方法更便于访问！