Creating an Isoceles Trapezoid shape

问题:

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 !

回答1:

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.

回答2:

Yes, you can ! There are a few way, but you would have to use CSS3, which isnt supported by old browser such as old IE versions ! (works in ie9+ I think).

You can see a good tutorial here :

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

(A way to do using CSS3 shaping)

Or you could use this kind of code :

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

And use this tutorial to do one triangle left and right to do the corner

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

(like this)

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

Be sure not to put no border on .center on right or left if you do it that way, and to put the same background-color to every divs. I belive this method is better for accessibility !