如何在不使用背景图像的情况下模拟此按钮？

Question

我想在CSS中模拟以下按钮，而不使用背景箭头的图像。我还在学习过程中，所以我对如何实现这一点感到有点困惑。

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

Answer 1

在你的按钮元素中添加2个div，第二个是三角形。

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

并使用this triangle css by Chris Coyier。将2个内部div设为浅蓝色，并为按钮提供深蓝色背景色。