div上的标签[CSS]

Question

是否可以在纯CSS中制作这样的标签？

Answer 1

您可以使用CSS3 pseudo classes。查看下面的代码段。

.ribbon {
 font-size: 16px !important;
 width: 200px;
 position: relative;
 background: #ccc;
 color: #fff;
 text-align: center;
 padding: 1em 2em; 
 margin: 2em auto 3em;
} 
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #999 transparent transparent transparent;
 bottom: -1em;
}
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}

<h1 class="ribbon">
   <strong class="ribbon-content">xyz</strong>
</h1>