我只是问如何用css边框样式制作这些盒子?
由于
答案 0 :(得分:1)
可能这就是你想要的。
.inbox{margin:20px; cursor:pointer;}
.arrow_box {
position: absolute;
border: 2px solid #888;
border-radius:5px;
height:20px;
width:25px;
padding:5px 10px;
margin-left:10px;
text-align:center;
margin-top:-8px;
font-weight:bold;
color:#888;
}
/* to display it on hover uncomment the below css
.arrow_box{display:none;}
.inbox:hover .arrow_box{display:inline-block;}
*/
.arrow_box:after, .arrow_box:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 8px;
margin-top: -8px;
}
.arrow_box:before {
border-color: rgba(136, 136, 136, 0);
border-right-color: #888;
border-width: 11px;
margin-top: -11px;
}
<ul>
<li class="inbox">Inbox
<span class="arrow_box">25</span>
</li>
<li class="inbox">Spam
<span class="arrow_box">15</span>
</li>
</ul>