具有邊框半徑和三角形邊的CSS項目

是否可以在CSS（無圖像）中製作具有邊框半徑和三角形邊的項目？具有邊框半徑和三角形邊的CSS項目

li items

2012-09-19 Oleg Pasko

是的，但它不是在舊版本的IE瀏覽器的支持。這是一個問題嗎？ – zzzzBov

每個（缺少更好的術語）可能更容易處理兩個元素。一個用於較大的左手部分，圓角邊緣，另一個用於三角形。 – j08691

它不需要IE支持:)如果是另一個元素也可以，但是如何創建沒有指定高度的三角形？ –

您可以使用SVG圖像，將在任何規模的大幅渲染，並且將適應元素的大小，它應該是這樣的......

.button { 
    background: #000; 
    float: left; 
    position: relative; 
    color: #999; 
    font: 15px/130% Arial, sans-serif; 
    padding: 10px 20px; 
    clear: both; 
    margin: 10px; 
    border-radius: 5px 0 0 5px; 
} 

.button:after { 
    content: ''; 
    display: block; 
    width: 10px; 
    position: absolute; 
    right: -10px; 
    height: 100%; 
    top: 0; 
    background: transparent url('triangle.svg') 0 0 no-repeat; 
}

http://jsfiddle.net/Ch7aA/

這僅的jsfiddle會在Webkit中工作是因爲我已經內聯了svg，所以你可以理解它是如何工作的，但是如果你從外部文件加載它，它應該可以正常工作。下面是引用渲染：

enter image description here

來源

2012-09-19 19:36:35 Duopixel

看看這個： http://css-tricks.com/snippets/css/css-triangle/ 或本：http://jonrohan.me/guide/css/creating-triangles-in-css/

爲動力高度，有一個問題和答案在這裏：CSS triangle with dynamic height

來源

2012-09-19 17:18:20

這就是最好的解決方案，但我有一個問題：如何創建沒有指定高度的三角形？一個li項目可以在一行中，另一個在兩個... –

HTML：

CSS：

span{ 
    display:block; 
    width:100px; 
    float:left; 
    background-color:green; 
    text-align:center; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
    padding:5px 0; 
} 
div:after { 
    content: ""; 
    display:block; 
    float:left; 
    border-top: 15px solid transparent; 
    border-bottom:15px solid transparent; 
    border-left: 10px solid green; 
}

jsFiddle Demo

更新：

爲了能夠處理不同的高度，你會需要要麼寫一些JavaScript代碼動態更改邊框尺寸或使用CSS截斷文本。雖然，這取決於你的特殊要求。

來源

2012-09-19 17:26:50 xandercoded

對於可變元素高度不起作用，如OP指示他需要。 [見JSFiddle]（http://jsfiddle.net/hJfgw/4/）。 –

謝謝，但是， - 兩行問題:) –

您既可以使用JavaScript，也可以使用CSS截斷文本 - http://jsfiddle.net/hJfgw/7/ - 儘管這取決於您的特定要求。 – xandercoded

具有邊框半徑和三角形邊的CSS項目

回答

相關問題