: после того, как не работает, как ожидалось - CSS

Question

Ниже кнопки я хочу

JSFIddle

HTML

<div> 
    <h5 style="margin: 0;position: relative;" class="right-arrow">LEARN MORE</h5> 
</div> 

CSS

div { 
    background-color: red; 
    border-radius: 10px; 
    padding: 0.5em; 
    float: left; 
    position: relative; 
} 

.right-arrow:after { 
    content: ''; 
    content: ''; 
    vertical-align: middle; 
    border: 20px solid transparent; 
    border-left-color: white; 
    border-width: 8px 20px; 
    position: absolute; 
    padding-left: 10px; 
} 

Проблема

Не знаю, почему стрелка вправо происходит снаружи ...

Возможное решение Я не хочу

Я не хочу, чтобы мой div из исправить ширина !! поэтому float: left; в div не требуется. Другие решения приветствуются. Благодаря

Answer 1

Попробуйте так:

div { 
background-color: red; 
border-radius: 10px; 
padding: 0.5em 30px .5em .5em; /* added right padding */ 
float: left; 
position: relative; 
} 

.right-arrow:after { 
    content: ''; 
    content: ''; 
    vertical-align: middle; 
    border: 20px solid transparent; 
    border-left-color: white; 
    border-width: 8px 15px; 
    position: absolute; 
    margin-left: 8px; /* newly added */ 
} 

Вы должны установить отступ право на фоне DIV как этот demo

Answer 2

сделать следующее CSS изменения

http://jsfiddle.net/vasanthanvas/x4knsgcj/

.right-arrow{padding:0 25px 0 0 } 
.right-arrow:after { 
content: ''; 
    vertical-align: middle; 
    border: 20px solid transparent; 
    border-left-color: white; 
    border-width: 8px 15px; 
    position: absolute; 
    padding-left: 10px; 
    right: -27px; 
} 

Answer 3

Попробуйте

.right-arrow:after { 
content: ''; 
vertical-align: middle; 
border: 1px solid transparent; 
border-left-color: white; 
border-width: 8px 0 8px 10px; 
margin-left: 10px; 
display:inline-block; 
} 

Answer 4

Вы можете попробовать это

fiddle

div { 
    background-color: red; 
    border-radius: 10px; 
    padding: 0.5em 1.5em 0.5em 0.5em; 
    float: left; 
    position: relative; 
} 

.right-arrow:after { 
    /* content: ''; */ 
    content: ''; 
    vertical-align: middle; 
    border: 0 solid transparent; 
    border-left-color: white; 
    border-width: 8px 0 8px 16px; 
    position: absolute; 
    /* padding-left: 10px; */ 
    right: -20px; 
    top: 0; 
}