Question

我正在尝试使用css创建标记形状，使其看起来像：

enter image description here

我正在尝试关注，但无法使用三角区域的边框。

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/

Answer 2

以下代码有助于创建标记形状。它适用于主流浏览器。

的CSS：

 #swc{
     position:relative;
     margin:0 5px 0 10px;
     display:inline-block;
     height:66px;
     padding: 0 35px 0 20px;
        font-size: 25px;
     line-height:65px;
        cursor: pointer;
        font-weight: 100;
        margin: 20px 25px;
        background:#f3f3f3;
        transition: background 0.3s;
    }

    #swc:after{
     position:absolute;
     content:"";
     right:-19px;
     width: 1px;
     height:0px;
     border-left:18px solid #f3f3f3;
     border-top:  33px solid transparent;
     border-bottom: 33px solid transparent;
        transition: border 0.3s;
    }

    #swc:hover{
        background: green;
     color:#ffffff;
    }

    #swc:hover:after{
        border-left-color:green;
    }

HTML：

<span class="pricetag-right" id="swc">Tag Content!</span>

参考demo

Answer 3

我们对此的实现略有不同，该实现会产生圆角。这使用了一个旋转了45°的圆角正方形。

<h1 class="tag">my-tag</h1>

.tag {
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  border-color: #c8d7f2 transparent #c8d7f2 #c8d7f2;
  border-radius: .25em 0 0 .25em;
  padding: 0.1em 0.6em 0.1em 0.3em;
  background-color: #e5ecf9;
  line-height: 1.2em;
}

.tag:after {
  content: "\25CF";
  position: absolute;
  display: inline-block;
  height: 1.2em;
  width: 1.17em;
  transform: rotate(45deg);
  color: white;
  text-indent: 0.3em;
  line-height: 1em;
  text-shadow: 0 0 1px #333;
  background-color: #e5ecf9;
  border-radius: 0.33em 0.33em 0.33em 1em;
  border-width: 1px;
  border-style: solid;
  border-color: #c8d7f2 #c8d7f2 transparent transparent;
}

需要注意的几件事：

正方形包含一个圆形的标点符号。要进行调整，请使用行高和文本缩进。
正方形的边框需要设置为透明颜色，宽度为1px。如果不这样做，则其他边框（可见边框）会从1px变为0px处逐渐缩小。
他的效果很好，几乎达到了像素完美，但是在Chrome和Firefox上的渲染效果确实有些不同。我试图使其在透明背景下工作，但是您需要某种颜色来掩盖正方形与标签相接处的时髦。这不是很完美。

有趣的是，它可以作为类应用，并且可以在H1-H6或p标签上使用。

用css创建标签形状

3 个答案:

更新