盒子末端带三角形的链接

Question

我一直在尝试创建一个带有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;
}

- John Ayers

Answer 1

问题在于您添加了一个宽度为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

- Danield

---

那个非常有效。没想到宽度甚至会成为问题。 - John Ayers

Answer 2

绝对定位在这里是你的好朋友。 在链接中添加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/

您可能需要调整边框宽度和/或箭头位置以适应您的喜好。

- Jared

Answer 3

在你的侧边栏换行类中，你可以一步得到想要的结果。你可以添加左填充并将图像添加到颜色前面的背景中，就像这样：

.sidebar-linebreak{
 //Your other code
    display:block;
    padding-left:15px;
    background:url("ImageLocation/triangleImage.png") #1a9ec6 no-repeat;
    background-size:15px;
    background-position:left;

}

如果你想把它放在右边，只需向右添加填充并将图像位置设置为右侧而不是左侧即可。

- ksealey