创建等高线梯形 [英] Creating an Isoceles Trapezoid shape

问题描述

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

我也想知道，这是一个正确的地方这样的问题吗？

感谢任何帮助！

解决方案

这种形状（ | JS Bin Demo - 签入IE< 9，JSFiddle不支持。

I'm wondering if I could produce something similar to this with CSS:

And I'm also wondering, is this the right place for such a question? I have not tried anything codewise, I've done the brown images with photoshop.

Thanks for any help !

解决方案

This shape (an Isoceles Trapezoid) can be easily made using CSS3 by rotating a div with a bit of perspective.

Explanation

1. The shape is achieved by rotating an absolutely positioned pseudo-element (.container:after) along the x-axis with a perspective.
2. We are not rotating the actual container div because it would cause the link (and any other) text inside it also to be rotated.
3. Top border and an inset box shadow is used to mimick the shape exactly as shown in the figure in question. Top border produces the line with a lighter shade on top and the inset shadow produces the dark edges all around the shape.
4. Since rotate transformations are not supported in lower versions of IE, the shape would not come in IE < 9. However, it would degrade gracefully into a rectangle shaped box in IE 8 and 9.
5. IE 7 doesn't support pseudo-elements and hence in that even the box would not appear but the links would show up as-is. However, the same behavior as in IE 8/9 could be achieved by adding conditional CSS (add background and shadows to the container div) to target only 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>

Screenshot - From browsers that support transforms

Screenshot - From browsers that don't support transforms (IE 8 and 9)

Fiddle Demo | JS Bin Demo - to check in IE < 9 which are not supported by JSFiddle.

这篇关于创建等高线梯形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！