Html CSS使用实体填充将渐变应用于直角三角形形状

我想对三角形（class=“triangle right”）应用与矩形（class=“fillblue”）相同的渐变。我见过其他一些例子，但它们对我不起作用。将两种形状结合起来并使用一个类也会很棒

CSS:

HTML:

步骤1

第1部分：给三角形一个渐变 实现这一点的最简单方法是反转三角形。并使用渐变延伸元素的长度

. 倒三角形 与其给三角形上的左边框一个纯色，不如给顶部和底部边框一个颜色（在本例中，我们希望与背景颜色匹配，因此让这些边框变成白色，因为这是JSFIDLE背景颜色）：

。直角三角形{
...
边框顶部：20px纯白；
左边框：40px实心透明；
边框底部：20px纯白；
}

如果您不确定这会实现什么效果，下面是一个三角形示例，当顶部和底部边框设置为<代码>红色而不是<代码>白色：

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

.fillblue{
...
右边填充：40px；
}

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

将倒三角形放置在渐变元素的顶部 现在我们只需要在倒三角形上设置一个负边距，使其显示在渐变元素的顶部：

。直角三角形{
...
左边距：-40px；
}

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

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

---

第2部分：将两个形状合并为一个元素 要做到这一点，我们可以利用

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

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

现在，我们修改以前的

.triangle right

样式以使用此

：在
伪元素之后：

.fillblue:之后{
宽度：0；
身高：0；
边框顶部：20px纯白；
左边框：40px实心透明；
边框底部：20px纯白；
}

最后，我们为其提供了新的属性，以正确定位并实际显示：

.fillblue:之后{
...
内容：''；
位置：绝对位置；
排名：0；
右：0；
}
我想建议使用
边框图像：线性梯度（…）
但后来我向上看，发现不可能只对其中一个边框应用边框图像，然后使其他边框透明。也没有
左边框图像
，因此也不起作用。由于
边框图像

是CSS的一个相对较新的补充（它是CSS3的一部分），因此它没有像其他边框样式那样集成在CSS中。这就是为什么在边界上这样做是不可能的。（如果您确实尝试添加边框图像，然后尝试使用透明边框覆盖它，则看起来像（仅适用于简单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;
}

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

不过，它还有其他明显的缺点，即您依赖于使用

transform

和

margin

来固定其位置。其他浏览器处理这个问题的方式可能与Chrome不同，因此显示三角形的方式也可能不同。它们都应该以相同的方式显示，但总有一些浏览器决定做一些稍微不同的事情

代码说明：

/*etc.*/

代表其他浏览器前缀，宽度和高度为28px，因为这是旋转正方形的高度，其对角线长度（

sqrt（宽度^2+高度^2）

）。这也是

左边距

需要为

-14px

（此对角线长度的一半）的原因：它需要向左移动14个像素，以便其角在

.fillblue

元素上移动

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