Ссылка с треугольником в конце окна

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; 
} 

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

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/

Вы, возможно, потребуется настроить ширину границ и или расположение стрелки по своему вкусу.

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; 

} 

Если вы хотите справа, просто добавить отступ вправо и расположите изображение справа, а не слева