做一个
：
前面有一个小logo，后=后面有一个小三角。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 20px;
line-height: 20px;
font-size: 14px;
background-color: black;
color: white;
}
</style>
</head>
<body>
<div>abraham贴吧</div>
</body>
</html>
主要是解决前面有一个小logo，后=后面有一个小三角的问题。
伪元素！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div::before{
content: "";
display: inline-block;
width: 12px;
height: 11px;
background-image: url(tieba.jpg);
background-size: 100% 100%;
margin-right: 5px;
vertical-align: -1px;
}
div{
padding: 0 10px;
width: 200px;
height: 20px;
line-height: 20px;
font-size: 14px;
background-color: blue;
color: white;
}
div::after{
content: "";
display: inline-block;
width: 6.5px;
height: 11.5px;
float: right;
margin-top: 3px;
background-image: url(sanjiao.jpg);
background-size: 100% 100%;
}
</style>
</head>
<body>
<div>abraham贴吧</div>
</body>
</html>
图片有点low