我一直在努力制作一个上面有css类的链接。当添加该类时,它会在后面添加一个蓝色背景,并在背景宽度的末尾添加一个三角形。问题是,我似乎能弄清楚为什么它不能正确排列。我尝试过浮动和不同的显示设置。
我的问题是如何让一个链接后面有一个背景,然后在链接背景的末尾添加一个三角形。此外,如果你对我如何做到这一点有任何其他建议,我也将不胜感激。
我已经为我的工作示例设置了一个jsfiddle。http://jsfiddle.net/L35basmc/
HTML:
<a href="features.php" class="sidebar-linebreak-active"><i class="fa fa-trophy fa-lg"></i> Feature Highlights</a><div class="sidebar-linebreak-active-arrow"></div>
<a href="create-your-store.php" class="sidebar-linebreak"><i class="fa fa-building fa-lg"></i> Create your store</a>
<a href="configure-your-products.php" class="sidebar-linebreak"><i class="fa fa-money fa-lg"></i> Configure your products</a>
<a href="manage-your-store.php" class="sidebar-linebreak"><i class="fa fa-fax fa-lg"></i> Manage your store</a>
<a href="rank-high-in-search.php" class="sidebar-linebreak"><i class="fa fa-rocket fa-lg"></i> Rank high in search</a>
<a href="marketing.php" class="sidebar-linebreak"><i class="fa fa-users fa-lg"></i> Marketing</a>
<a href="conversion-tools.php" class="sidebar-linebreak"><i class="fa fa-cogs fa-lg"></i> Conversion tools</a>
<a href="hosting-and-security.php" class="sidebar-linebreak"><i class="fa fa-cloud fa-lg"></i> Hosting & security</a>
<a href="analytics.php" class="sidebar-linebreak"><i class="fa fa-database fa-lg"></i> Analytics</a>
<a href="apps-and-integration.php" class="sidebar-linebreak"><i class="fa fa-laptop fa-lg"></i> Apps & integrations</a>
<a href="expert-support.php" class="sidebar-linebreak"><i class="fa fa-umbrella fa-lg"></i> Expert support</a>
CSS:
.sidebar-linebreak {
font-family: 'Raleway', sans-serif;
display: block;
color: #53c6f3;
font-size: 18px;
margin-bottom: 5px;
padding: .4em .8em;
border-radius: 8px;
width: 100%;
}
.sidebar-linebreak:hover {
color: #1a9ec6;
}
.sidebar-linebreak-active, sidebar-linebreak-active:hover {
float: left;
font-family: 'Raleway', sans-serif;
display: inline-block;
font-size: 18px;
margin-bottom: 5px;
padding: .4em .8em;
border-radius: 8px 0 0 8px;
width: 100%;
color: #FFFFFF !important;
background-color: #1a9ec6;
}
.sidebar-linebreak-active-arrow {
display: inline-block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #1a9ec6;
}
.sidebar-linebreak-active-arrow:after {
clear: both;
}
问题是添加了一个宽度为100%的背景,然后添加了箭头,这就是箭头下落的原因。
为你的背景设置一个较小的宽度,比如90%-
.sidebar-linebreak-active, sidebar-linebreak-active:hover {
float: left;
font-family: 'Raleway', sans-serif;
display: inline-block;
font-size: 18px;
margin-bottom: 5px;
padding: .4em .8em;
border-radius: 8px 0 0 8px;
width: 90%; /* <-- */
color: #FFFFFF !important;
background-color: #1a9ec6;
}
FIDDLE
绝对定位是您的朋友。将position:relative;
添加到链接中,并使用链接上的:after
创建箭头。然后,您可以抛弃空的div,而不需要处理浮点运算。
.sidebar-linebreak {
font-family: 'Raleway', sans-serif;
display: block;
color: #53c6f3;
font-size: 18px;
margin-bottom: 5px;
padding: .4em .8em;
border-radius: 8px;
width: 100%;
}
.sidebar-linebreak:hover {
color: #1a9ec6;
}
.sidebar-linebreak-active, sidebar-linebreak-active:hover {
font-family: 'Raleway', sans-serif;
display: inline-block;
font-size: 18px;
margin-bottom: 5px;
padding: .4em .8em;
border-radius: 8px 0 0 8px;
width: 100%;
color: #FFFFFF !important;
background-color: #1a9ec6;
position: relative;
}
.sidebar-linebreak-active:after{
content:"";
display: inline-block;
width: 0;
height: 0;
border-top: 20px solid #fff;
border-bottom: 20px solid #fff;
border-left: 20px solid #1a9ec6;
position: absolute;
top:-2px;
right: 0;
}
http://jsfiddle.net/L35basmc/17/
您可能需要根据自己的喜好调整边框宽度和/或箭头的位置。
在侧边栏linebreak类中,您可以一步获得所需的结果。你可以添加左填充并将图像添加到背景颜色前面,它将沿着的线条
.sidebar-linebreak{
//Your other code
display:block;
padding-left:15px;
background:url("ImageLocation/triangleImage.png") #1a9ec6 no-repeat;
background-size:15px;
background-position:left;
}
如果你想把它放在右边,只需在右边添加填充,然后把图像放在右边而不是左边