Question

我想创建箭头形状的按钮，这些按钮是倾斜的，即使用html和css指向对角线向上或向下的方向。为了让你更好地理解，我会请你参考MS绘画应用程序的箭头'Shapes'。按钮将至少比那些形状大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中对此进行了测试。

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

1 个答案: