CSS将渐变应用于具有实心填充的直角三角形

Question

我想对三角形 (class="triangle-right") 应用与矩形 (class="fillblue") 相同的渐变。我看过其他一些例子，但它们对我不起作用。结合这两种形状并使用一个类也很棒！

JS FIDDLE HERE!

CSS：

.fillblue {
background: rgb(208,228,247); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(208,228,247,1) 0%, rgba(115,177,231,1) 24%, rgba(10,119,213,1) 50%, rgba(83,159,225,1) 79%, rgba(135,188,234,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(208,228,247,1)), color-stop(24%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(79%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7',   
    endColorstr='#87bcea',GradientType=0 ); /* IE6-9 */

height: 40px;
width: 100px;
display: inline-block;
float: left;
color: white;
text-align: center;
line-height: 40px;
font-weight: bold;
}

   .triangle-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 40px solid lightblue;
border-bottom: 20px solid transparent;
float: left;
}

HTML：

<div class="fillblue">Step 1</div><div class="triangle-right"></div>

Answer 1

第 1 部分：给三角形渐变

实现这一点的最简单方法是反转三角形。并使用渐变扩展元素的长度。

JSFiddle demo.

倒三角形

而不是给三角形上的border-left 一个纯色，你想给顶部和底部边框的颜色（在这种情况下，我们想要匹配背景颜色，所以让这些白色作为 JSFiddle 背景颜色）：

.triangle-right {
    ...
    border-top: 20px solid white;
    border-left: 40px solid transparent;
    border-bottom: 20px solid white;
}

如果您不确定这样做的效果，下面是一个三角形示例，当顶部和底部边框设置为red 而不是white：

增加渐变元素的宽度

由于您的三角形是 40px 宽，我们需要将渐变元素的宽度增加 40px。为此，我使用填充来确保文本保持在同一位置：

.fillblue {
    ...
    padding-right: 40px;
}

使用我们上面使用的相同的红色三角形，它现在看起来像这样：

将倒三角形放置在渐变元素的顶部

现在我们只需要在倒三角形上设置一个负边距，让它出现在渐变元素的顶部：

.triangle-right {
    ...
    margin-left: -40px;
}

最后，再次使用红色三角形，我们完成的结果如下所示：

---

第 2 部分：将两种形状组合成一个元素

为此，我们可以使用:after pseudo-element。

JSFiddle demo.

首先，让我们修改我们的 HTML：

<div class="fillblue">Step 1</div>

现在让我们给.fillblue 元素相对定位。我们这样做是为了在下一步中绝对定位我们的三角形：

.fillblue {
    ...
    position: relative;
}

现在我们修改之前的 .triangle-right 样式以使用这个 :after 伪元素：

.fillblue:after {
    width: 0;
    height: 0;
    border-top: 20px solid white;
    border-left: 40px solid transparent;
    border-bottom: 20px solid white;
}

最后我们赋予它新的属性以正确定位并实际显示：

.fillblue:after {
    ...
    content: '';
    position: absolute;
    top: 0;
    right: 0;
}

Answer 2

我想建议使用border-image: linear-gradient(...);，但后来我查看了https://developer.mozilla.org/en-US/docs/Web/CSS/border-top，发现不可能仅将边框图像应用于其中一个边框，然后使其他边框透明。也没有border-left-image，所以这也行不通。由于border-image 是CSS 的一个相对较新的补充（它是CSS3 的一部分），它并没有集成到CSS 以及其他边框样式中。这就是为什么用边界来做这件事是不可能的。 （如果您尝试添加边框图像，然后尝试用透明边框覆盖它，它看起来像 this（仅 webkit 的简单演示） - 它不起作用）

假设您想继续使用边框来创建三角形，我会说这是不可能的。

---

唯一能让它工作的方法是将 div 更改为具有对角渐变的正方形，并通过 CSS 变换旋转 45 度。最终会变成这样：

.triangle-right {
    display:inline-block;
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(208,228,247,1)), color-stop(24%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(79%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); /* Chrome,Safari4+ */
    /* etc. */
    width:28px; /* ~ sqrt(2*40^2)/2 */
    height:28px;
    -webkit-transform: rotate(45deg);
    /* etc. */
    margin-top:6px;
    margin-left:-14px;
}

Demo

请记住，这可能不是最好的解决方案，因为它完全依赖于转换，并非每个浏览器都支持这种转换，并且没有好的后备方案。与 James Donnely 的解决方案相比，它确实有一个优势，那就是它保持其软边框而不是锯齿状。

不过，它确实有其他明显的缺点，即您依赖于使用transform 和margin 来固定它的位置。其他浏览器可能无法像 Chrome 一样处理这个问题，因此会以不同的方式显示您的三角形。他们应该都以相同的方式显示它，但总有可能某些浏览器决定做一些稍微不同的事情。

代码解释：/* etc. */代表其他浏览器前缀，宽高均为28px，因为这是旋转正方形的高度，它的对角线长度（sqrt(width^2 + height^2)）。这也是margin-left 需要为-14px（此对角线长度的一半）的原因：它需要向左移动14 个像素，以便其角移动到.fillblue 元素上方。