css - 创建等腰梯形

Question

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

我也想知道，这是提出这样一个问题的正确地方吗？我没有尝试过任何代码，我用 Photoshop 完成了棕色图像。

谢谢你的帮助 ！

Answer 1

这种形状（等腰梯形）可以很容易地使用 CSS3 通过旋转 a来div制作。

解释

1. 该形状是通过.container:after沿 x 轴以透视旋转绝对定位的伪元素 ( ) 来实现的。
2. 我们没有旋转实际的容器div，因为它会导致其中的链接（和任何其他）文本也被旋转。
3. 顶部边框和插入框阴影用于完全模仿图中所示的形状。顶部边框产生顶部阴影较浅的线条，嵌入阴影产生形状周围的深色边缘。
4. 由于较低版本的 IE 不支持旋转转换，因此形状不会出现在 IE < 9 中。但是，它会优雅地降级为 IE 8 和 9 中的矩形框。
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）

小提琴演示| JS Bin Demo - 检入 JSFiddle 不支持的 IE < 9。

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 放置相同的背景颜色。我相信这种方法对可访问性更好！