带有底边三角形的标签

Question

我想在这张照片上取得一个效果:

但是我不确定它是否只能用CSS或者我需要JS.现在我的标签看起来像这样:

我的css代码:

.label {
position: absolute;
top: 10px;
left: -5px;
z-index: 1;
display: inline-block;
padding: 1px 20px 1px 24px;
background: #F07D31 none repeat scroll 0% 0%;
color: #FFF;
font: 10px/18px "FBold","Helvetica Neue",Helvetica,sans-serif;
text-transform: uppercase;
letter-spacing: 0.015em;
white-space: nowrap;
}

Answer 1

使用伪元素很容易做到这个效果,它不需要你改变HTML中的任何东西:

div {
  width:300px;
  height:200px;
  background-color:#f00;
  padding:10px;
}

.label {
 position: absolute;
 top: 10px;
 left: -5px;
 z-index: 1;
 display: inline-block;
 padding: 1px 20px 1px 24px;
 background: #F07D31 none repeat scroll 0% 0%;
 color: #FFF;
 font: 10px/18px "FBold","Helvetica Neue",Helvetica,sans-serif;
 text-transform: uppercase;
 letter-spacing: 0.015em;
 white-space: nowrap;
}
.label:before {
 display:inline-block;
 position:relative;
 margin-bottom:-17px;
 margin-left:-20px;
 content:"";
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 10px 10px 0;
 border-color: transparent  #904610 transparent transparent;
}

<div>
 <span class=label>Text goes here</span>
</div>

您基本上是创建一个CSS边框三角形并对其进行定位,以便它提供您尝试实现的外观.