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

Question

我想对三 Angular 形 (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 部分:为三 Angular 形设置渐变

实现此目的的最简单方法是反转三 Angular 形。并使用渐变扩展元素的长度。

JSFiddle demo .

反转三 Angular 形

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

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

如果您不确定这样做的效果，下面是顶部和底部边框设置为 red 而不是 white 时的三 Angular 形示例:

增加渐变元素的宽度

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

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

使用我们上面使用的相同红色三 Angular 形，这就是它现在的样子:

将倒三 Angular 形放置在我们的渐变元素之上

现在我们只需要在我们的倒三 Angular 形上设置一个负边距，让它出现在我们的渐变元素之上:

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

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

---

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

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

JSFiddle demo .

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

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

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

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