Question

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

enter image description here

我也想知道，这是一个适合这样一个问题的地方吗？我没有尝试任何代码，我用photoshop完成了棕色图像。

感谢您的帮助！

Answer 1

这个形状（Isoceles Trapezoid）可以通过使用perspective旋转div来轻松制作。

<强>解释

通过沿着x轴旋转绝对定位的伪元素（.container:after）来实现形状。
我们不会旋转实际的容器div，因为它会导致其中的链接（和任何其他）文本也被旋转。
顶部边框和插入框阴影用于完全模仿形状，如图所示。顶部边框生成顶部较浅的阴影线，插入阴影在整个形状周围产生暗边。
由于在较低版本的IE中不支持旋转变换，因此形状不会出现在IE＆lt; 9.然而，它会在IE 8和9中优雅地降级为矩形框。
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>

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

enter image description here

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

enter image description here

Fiddle Demo | JS Bin Demo - 检查IE＆lt; 9 JSFiddle不支持。

Answer 2

是的，你可以！有一些方法，但你必须使用CSS3，老浏览器，如旧的IE版本不支持CSS3！（适用于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添加相同的背景色。我相信这种方法更适合可访问性！

创建等腰梯形形状

2 个答案: