css底部圆形边框链接

增加了伪类一个是半圆，另一个是小正方形

<!-- body-->
<div class="tabs" style="width: 50px;">
	<div class="li">
		123123
	</div>
</div>

<!-- css -->
<style type="text/css">
	 .li{
		 height: 40px;
		 line-height: 40px;
		 padding: 0 15px;
		 cursor: pointer;
		 position: relative;
		 font-size: 18px;
		 color: #fff;
		 background: #eee;
		 transition: color 0.2s, height 0.2s, margin 0.2s;
		 border-radius: 10px;
		 border-bottom-left-radius: 0;
		 border-bottom-right-radius: 0;
		 position: relative;
	 }
	 .li:before {
		 content: "";
		 bottom: 0;
		 width: 10px;
		 height: 10px;
		 position: absolute;
		  left: -10px;
		 border-radius: 0 0 10px 0;
		 background: white;
		 z-index: 2;
	 }
	 .li:after {
		 content: "";
		 bottom: 0;
		 width: 10px;
		 height: 10px;
		 position: absolute;
		  left: -10px;
		 background: rgb(238,238,238);
		 z-index: 1;
	 }
</style>