使用CSS创建响应三角形

时间:2013-07-24 05:42:40

标签: jquery css responsive-design shape css-shapes

我当前正试图在CSS中为响应式网站创建三角形,并且无法在stackoverflow上找到一个很好的示例,所以这就是我如何做到的。

3 个答案:

答案 0 :(得分:8)

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

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/

答案 1 :(得分:5)

通过利用根据父级宽度计算的填充来覆盖大的固定宽度三角形,只需CSS即可实现响应三角形。要创建宽度为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;
}

Here's a fiddle。有关这些工作方式以及向下,向左和向右指向三角形片段的完整说明,请参阅Pure CSS responsive triangles上的文章。 CSS给出的是一个基本高度比为2的三角形。试图改变三角形的比例,而不知道这些三角形的假响应如何复杂。

答案 2 :(得分:0)

您可以使用简单的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;
}