只使用CSS創建一個標籤或標籤

我想創建一個標籤或標籤，如只使用CSS的樣子，如果可能的話，沒有圖像。這裏是我的意思是：只使用CSS創建一個標籤或標籤

Label

我可以創建一個結束，但我一直沒能形成三角形點。是否有可能只用CSS做到這一點？

2012-10-16 L84

在Google上搜索，你會發現一些。該形狀是三角形和矩形之間的組合。這裏是三角形，http://css-tricks.com/snippets/css/css-triangle/ –

確實有方法來創建CSS三角形，這裏是從css-tricks.com部分：

.arrow-right { 
width: 0; 
height: 0; 
border-top: 60px solid transparent; 
border-bottom: 60px solid transparent; 

border-left: 60px solid green;

}

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

來源

2012-10-16 01:10:50

謝謝，我知道我之前看到過的東西，但無法找到信息。 – L84

這應該是一個良好的開端 http://css-tricks.com/snippets/css/css-triangle/

來源

2012-10-16 01:11:03

HTML

<div class="arrow-left"></div> 
<div class="arrow-body"></div>

CSS

.arrow-left { float:left; width: 0;  height: 0;  border-top: 20px solid transparent;  border-bottom: 20px solid transparent;   border-right:20px solid blue; } 
.arrow-body{ float:left; width:200px; height:40px; background-color:Blue;}

來源

2012-10-16 01:14:43 Tariqulazam

浮動元素給它一個隱含的'display：block;' - 所以使用'float：left;'和'display：inline-block;'是矛盾的。（也只是看到你使用了'position：inline-block;' - 這完全無效）。 –

感謝瑞安Wheale。更新了我的帖子。 – Tariqulazam

是，但不能同時支持IE7：

<a class="tab">Your label text</a> 

.tab { 
    background: black; 
    border-top-right-radius: 3px; 
    border-bottom-right-radius: 3px; 
    position: relative; 
} 
.tab::before { 
    content: " "; 
    position: absolute; 
    right: 100%; 
    top: 0; 
    width: 0; 
    height: 0; 
    border-width: 35px; /* play with this value to match the height of the tab */ 
    border-style: solid; 
    border-color: transparent black transparent transparent; 
}

來源

2012-10-16 01:15:14

這裏是另外一個

<div></div>

div{ 
    width:500px; 
    height:100px; 
    background-color:black; 
    border-top-right-radius:10px; 
    border-bottom-right-radius:10px; 
    margin-left:100px; 
} 
div:before{ 
    width:0; 
    height:0; 
    content:""; 
    display:inline-block; 
    border-top:50px solid transparent; 
    border-right:100px solid black; 
    border-bottom:50px solid transparent; 
    position:absolute; 
    left:0; 
}

http://jsfiddle.net/e8feE/

來源

2012-10-16 01:35:14 Musa

只使用CSS創建一個標籤或標籤

回答

相關問題