创建Isoceles梯形形状

Question

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

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

谢谢你的帮助 !

Answer 1

此形状(Isoceles梯形)能够使用CSS3通过旋转可以容易地制成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 - 检查IEF中不支持的IE <9.