仅使用CSS创建标签或标签

Question

我想创建一个标签或标签，如只使用CSS而不是图像，如果可能的话。这就是我的意思：

我可以创建一端，但我无法创建三角形点。是否可以仅使用CSS执行此操作？

Answer 1

确实有创建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/

Answer 2

是的，但不支持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;
}

Answer 3

这应该是一个良好的开端 http://css-tricks.com/snippets/css/css-triangle/

Answer 4

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

Answer 5

这是另一个

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