Css 如何制作斜箭头形按钮

我想使用html和css创建箭头形状的按钮，这些按钮是倾斜的，即指向对角向上或向下的方向。为了让您更好地理解，我要求您参考MS paint应用程序的箭头“形状”。按钮将至少比这些形状大5-6倍，并且对角指向上或下

---

任何示例代码帮助都将非常有用

你可以做一些类似于我想出的这个快速例子的事情

---

注意：我只在Chrome 38上测试过这一点。

Stackoverflow不是慈善机构。当你陷入困境时，尝试一些方法并寻求帮助。按照通常的方式进行，然后

变换：旋转

非常简单。嗨，它非常接近我要找的东西。唯一的问题是按钮的颜色应该是白色/灰色而不是红色。按钮的宽度应该再宽一点，这样我们就可以在按钮内部写/显示一个文本，指明它的作用。嗨，我只是想把一个倾斜的按钮做成箭头形状的后退按钮。因此，将另一个类改为“.left”，并将旋转角度改为-180度，这就成功了。但是里面的文字也被颠倒了，我怎么能修正呢。还有，当按下按钮时，我如何能带来凹陷感？

.up {
    -ms-transform: rotate(-45deg);
    /* IE 9 */
    -webkit-transform: rotate(-45deg);
    /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
}
.down {
    -ms-transform: rotate(45deg);
    /* IE 9 */
    -webkit-transform: rotate(45deg);
    /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}
.arrow {
    width: 100px;
    height: 20px;
    background: #f00;
    position: relative;
    margin: 100px;
}
.arrow::after {
    content:' ';
    height: 0;
    width: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #f00;
    position: absolute;
    left: 100px;
    top: -10px;
}