相关疑难解决方法(0)

在CSS Tricks上有很多不同的CSS形状- CSS的形状,我特别对三角形感到困惑:

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div id="triangle-up"></div>

它是如何以及为什么有效？

我需要在一侧创建带三角形的按钮(如http://css-tricks.com/triangle-breadcrumbs/),带有线性垂直渐变和边框,我想使用纯CSS3.如果我需要45度的"三角形",那就没关系,我只是写这样的smth

.button:after {
    -webkit-transform: rotate(45deg);
    background: -webkit-linear-gradient(-45deg, #fff, #000);
    content: '';
    width: 2em;
    height: 2em;
    display: block;
}

并在.button下隐藏一半伪元素(因此只有另一半可见,如三角形).

但是,如果我需要另一个角度(例如更陡峭) - 我无法使用标准XY旋转和缩放.我可以使用例如2个div,一个用于三角形的上半部分,一个用于底部,但是边框和渐变可能存在问题.

也许有可能通过多个颜色停止渐变来做到这一点？