創建等腰梯形形狀

Question

我想知道是否可以用CSS生成類似的東西：

我也想知道，這是一個提出這個問題的正確地方嗎？ 我沒有在代碼上進行任何嘗試，我已經用photoshop完成了棕色圖像。

謝謝你的幫助 ！

Answer 1

使用CSS3可以很容易地通過旋轉帶有一定角度的div來制作這種形狀（ 等腰梯形 ）。

說明

1. 通過沿透視圖沿x軸旋轉絕對定位的偽元素（ .container:after ）來獲得形狀。
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演示 -用於檢入JSFiddle不支持的IE <9。

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設置相同的背景色。 我相信這種方法對可訪問性更好！