Как я могу эмулировать эту кнопку без использования фонового изображения?

Question

Я хотел бы эмулировать следующую кнопку в CSS без использования изображения для фоновой стрелки. Я все еще участвую в процессе обучения, поэтому я немного озадачен тем, как я могу это сделать.

http://codepen.io/anon/pen/xklyD

Answer 1

Внутри вашего кнопочного элемента добавьте 2 дивы, второе треугольник.

<button> 
    <div class="text">Login</div> 
    <div class="triangle"></div> 
</button> 

И используйте this triangle css by Chris Coyier. Сделайте 2 внутренних divs голубыми и дайте кнопке темно-синий цвет фона.