使用CSS创建响应式三角形

Question

今天我在为一个响应式网站创建三角形的CSS样式时，在stackoverflow上找不到好的例子，所以这里是我的解决方法。

- Craig Cannon

---

在CSS-tricks.com上有一篇由Chris Coyer撰写的精彩文章，展示了如何使用纯CSS创建不止三角形的形状。http://css-tricks.com/the-shapes-of-css/ - sulfureous

@sulfureous 是的，那是一个很棒的资源。 - Craig Cannon

可能是响应式三角形div的重复问题。 - web-tiki

Answer 1

使角形响应式有些棘手，因为您无法在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/

- Craig Cannon

---

好的...对于问题和答案加1，但是你为什么要在rgba中使用％有什么解释吗？ - Mr. Alien

百分比超过100%了吗？ - Raptor

@Mr.Alien 哈哈，发现得好。我想我只是不小心从 Photoshop 复制了一个值，并包含了百分号。现在正在修正。 - Craig Cannon

Answer 2

使用CSS就可以实现响应式三角形，通过利用padding相对于父元素宽度的计算来覆盖一个大的固定宽度的三角形。要创建一个宽度为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用于创建底边高度比为2的三角形。如果不了解这些三角形如何实现响应式布局，请勿尝试更改三角形的比例，否则可能会很复杂。

- JoseV

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

- Arun Bertil

---

当然可以，但是您需要每10个像素设置一个媒体查询来保持一致的设计。 - Craig Cannon