創建Isoceles梯形

我想知道如果我能產生類似這種用CSS東西：創建Isoceles梯形

enter image description here

而且我也想知道，這是這樣一個問題的正確的地方？我沒有嘗試任何代碼，我用photoshop做了棕色圖像。

感謝您的幫助！

來源

2013-03-30 void

是的。看到這裏的例子：http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work –

http://www.css3shapes.com –

這裏有一個小提琴顯示它如何工作作爲元素背景：http://jsfiddle.net/nWU67/ – metadept

是的，你可以！有幾個方式，但你將不得不使用CSS3，其心不是由舊的瀏覽器如IE舊版本支持！（在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的。我相信這種方法更適合無障礙！

來源

2013-03-30 23:49:13

這個形狀（一個Isoceles Trapezoid）可以很容易地使用CSS3通過旋轉div位perspective。

說明

形狀由旋轉沿着x軸與立體絕對定位的僞元素（.container:after）來實現的。
我們不旋轉實際容器div，因爲它會導致其中的鏈接（和任何其他）文本也被旋轉。
頂部邊界的插入盒的陰影被用於模擬天生恰好在所討論的圖所示的形狀。上邊框上產生頂部較淡的線路和插圖陰影產生周圍所有的形狀的黑邊。
因爲低版本的IE不支持旋轉轉換，所以形狀不會在IE < 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 < 9哪些不支持JSFiddle。

來源

2014-09-14 13:15:08 Harry

創建Isoceles梯形

回答

相關問題