如何制作倾斜箭头形状的按钮

Question

我想创建倾斜的箭头形状按钮，即使用html和css指向对角向上或向下的方向。为了让你更好地理解，我请求你参考MS油漆应用的箭头"形状"。按钮将至少比这些形状大5-6倍，并对角指向上或下。

任何示例代码帮助都会很棒！

Answer 1

你可以做一些类似于这个快速例子的事情，我敲了jsFdiddle

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

注意：我只在Chrome 38中测试过这个。