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

Question

我想将相同的渐变应用于三角形（class =＆＃34; triangle-right＆＃34;）作为矩形（class =＆＃34; fillblue＆＃34;）。我见过其他一些例子，但它们并不适合我。将这两种形状结合起来并使用一个类也很棒！

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赋予纯色，而是要给顶部和bototm边框赋予颜色（在这种情况下，我们要匹配背景颜色，所以让这些颜色为白色＆＃ 39;是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-only demo），如果你试图添加边框图像，然后尝试用透明边框覆盖它 - 它不起作用）

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

---

然后，唯一可以使其工作的方法是将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上方元件。