jquery - 使用 CSS 创建响应式三角形

Question

我今天试图在 CSS 中为一个响应式网站创建三角形，但在 stackoverflow 上找不到一个很好的例子，所以这就是我的做法。

Answer 1

使角形状响应式有点棘手，因为您不能border在 CSS 中使用百分比作为值，所以我编写了几个函数来计算页面宽度并相应地调整三角形的大小。第一个计算加载页面时的大小，第二个在页面宽度变化时重新计算大小。

CSS：

.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid rgba(255, 255, 0, 1);
    border-right: 100px solid transparent;
}

HTML：

<div class="triangle"></div>

JS：

$(document).ready(function () {
    var windowWidth = $(window).width();
    $(".triangle").css({
        "border-top": windowWidth / 2 + 'px solid rgba(255, 255, 0, 1)'
    });
    $(".triangle").css({
        "border-right": windowWidth / 1.5 + 'px solid transparent'
    });
});

$(window).resize(function () {
    var windowWidthR = $(window).width();
    $(".triangle").css({
        "border-top": windowWidthR / 2 + 'px solid rgba(255, 255, 0, 1)'
    });
    $(".triangle").css({
        "border-right": windowWidthR / 1.5 + 'px solid transparent'
    });
});

这是一个 jsFiddle - http://jsfiddle.net/craigcannon/58dVS/17/

Answer 2

响应式三角形可以通过利用根据父级宽度计算的填充来覆盖一个固定宽度的大三角形来实现。要创建一个宽度为 100% 的向上三角形：

.triangle-up {
    width: 50%;
    height: 0;
    padding-left:50%;
    padding-bottom: 50%;
    overflow: hidden;
}
.triangle-up div {
    width: 0;
    height: 0;
    margin-left:-500px;
    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-bottom: 500px solid green;
}

或者使用伪元素和一个 div：

.triangle-up {
    width: 50%;
    height: 0;    
    padding-left:50%;
    padding-bottom: 50%;
    overflow: hidden;
}
.triangle-up:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-500px;
    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-bottom: 500px solid #959595;
}

这是一个小提琴。有关这些工作原理以及向下、向左和向右指向三角形片段的完整说明，请参阅我关于纯 CSS 响应式三角形的文章。给出的 CSS 是针对底高比为 2 的三角形。在不知道这些三角形如何假响应的情况下尝试更改三角形的比例可能会很复杂。

Answer 3

您可以使用简单的 CSS 实现相同的效果

为了使其响应式在媒体查询中使用它..

试试下面的 JsFiddle

http://jsfiddle.net/arunberti/52grj/

.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid rgba(255%, 204%, 0%, 1);
    border-right: 100px solid transparent;
}