類似新浪書籤，如下圖所示：
源碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css書籤製作</title>
<style type="text/css">
body{
font: 12px/1.5 'Microsoft YaHei';
}
div,a{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
font-size: 12px;
color: #333;
}
.topic-mark{
position: relative;
margin-left: 15px;
min-width: 24px;
font-weight: normal;
font-size: 12px;
color: #333;
border:1px solid #d9d9d9;
display: inline-block;
height: 20px;
line-height: 20px;
padding: 0 10px 0 5px;
}
.topic-mark span{
position: absolute;
top: 0;
left: -21px;
}
.topic-mark span i, .topic-mark span em{
border-width: 10px;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
overflow: hidden;
font-size: 0;
line-height: 0;
vertical-align: top;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
.arrow_1{
border-color: #cccccc;
}
.arrow_2 {
color: #fff;
border-color: #fff;
}
.topic-mark em {
margin: 0 0 0 -19px;
}
</style>
</head>
<body>
<div>
<a href="" class="topic-mark">
<span ><i class="arrow_1"></i><em class="arrow_2"></em></span>
社會
</a>
</div>
</body>
</html>