如何在列表项的左侧创建带有自定义边框的边框?
像这样:
我考虑过使用 css 3 角度....但我无法实现内圆或孔...有边框...而且它可能比以某种方式使用图像更乏味。
我现在正在考虑用背景图像来做这件事......并且已经关闭了左侧的边框,并试图让一个图形将自己定位在项目的左边缘,但没有运气。我的项目都有不同的长度,它们在水平滑块中浮动左侧项目,使其更加复杂。
我还需要不同的悬停和活动样式,如图所示。
最后,我需要提供一个圆形或椭圆形,它可以保存与类别中项目数量相关的数字,并将其附加到样式列表项框的右上角。
这是我到目前为止的进展:
HTML:
<div class="filters">
<div class="filters-inner">
<ul id="filters-slider" class="filters-list">
<li><a href="#">Darling</a></li>
<li><a href="#">Online Audience</a></li>
<li><a href="#">Digital Strategy</a></li>
<li><a href="#">Creative</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">eCommerce</a></li>
<li><a href="#">Social Media</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Ramblings</a></li>
<li><a href="#">Ideas</a></li>
<li><a href="#">Newy New</a></li>
<li><a href="#">Freshy Fresh</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Ramblings</a></li>
<li><a href="#">Ideas</a></li>
<li><a href="#">Newy New</a></li>
<li><a href="#">Freshy Fresh</a></li>
</ul>
</div>
</div>
CSS:
.filters {
background-color: #fff;
padding-top: 3px;
padding-bottom: 5px;
width: 1145px;
height: 45px;
float: left;
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
}
.filters-inner {
width: 1140px;
margin-right: auto;
margin-left: auto;
font-size: 11px;
overflow: hidden;
color: #999;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
ul.filters-list {
text-align: center;
white-space: nowrap;
display: inline-block;
padding-top: 10px;
}
ul.filters-list li {
float: left;
list-style-type: none;
padding-top: 2px;
padding-right: 20px;
padding-bottom: 2px;
padding-left:20px;
background-color: #fff;
margin-right: 10px;
margin-left: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
background-image: transparent url(http://www.dar-ling.com.php53-12.dfw1-1.websitetestlink.com/wp-content/themes/darling/img/leftside_tag_up.png);
background-repeat: no-repeat;
background-position: left center;
}
ul.filters-list li:hover {
background-color: #ECECEC;
background: transparent url(http://www.dar-ling.com.php53-12.dfw1-1.websitetestlink.com/wp-content/themes/darling/img/leftside_tag_hover.png) no-repeat left center;
}ul.filters-list li a {
color: #666666;
font-weight: bold;
}
ul.filters-list li a:hover {
text-decoration: none;
}
div.sample {
padding-top: 200px;
}
</p>
有谁知道如何正确地做到这一点?