用css创建标签形状

Question

我正在尝试使用css创建标签形状,使其看起来像:

我正在尝试跟随,但无法使用三角形区域的边框.

HTML:

<a href="#">Test</a>

CSS:

a{
    float: left;
    height: 35px;
    position:relative;  
    border: 1px solid red;
    border-right: none; 
    width: 100px;
} 

a:before{
    content: "";
    position: absolute;
    top: -1px;
    right: -18px;
    width: 0;
    height: 0;
    border-color: white white white red;
    border-style: solid;
    border-width: 19px 0 18px 18px; 
}

JSFiddle: http ://jsfiddle.net/Sac3m/

Answer 1

你可以旋转一个正方形,虽然我怀疑结果将是伟大的跨浏览器

修改后的代码

a {
    float: left;
    height: 35px;
    position:relative;  
    border: 1px solid red;
    border-right: none; 
    width: 100px;
} 
a:after {
    content: "";
    position: absolute;
    top: 4px;
    right: -13px;
    width: 25px;
    height: 25px;
    border: 1px solid red;
    border-left: none;
    border-bottom: none;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

http://jsfiddle.net/Sac3m/1/

(最新的IE浏览器,Firefox和Chrome似乎还可以)

更新

如果您需要IE8支持,可以尝试在(原始)红色三角形的顶部放置一个白色三角形:

a {
    float: left;
    height: 36px;
    position:relative;  
    border: 1px solid red;
    border-right: none; 
    width: 100px;
} 

a:before {
    content: "";
    position: absolute;
    top: -1px;
    right: -18px;
    width: 0;
    height: 0;
    border-color: white white white red;
    border-style: solid;
    border-width: 19px 0 19px 19px; 
}
a:after {
    content: "";
    position: absolute;
    top: 0;
    right: -17px;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent white;
    border-style: solid;
    border-width: 18px 0 18px 18px; 
}

http://jsfiddle.net/Sac3m/2/