使用CSS创建响应三角形 | 使用CSS创建响应三角形

本文介绍了使用CSS创建响应三角形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图在CSS中为CSS创建三角形，而不能在stackoverflow上找到一个很好的例子。解决方案

使角形响应是有点棘手，因为你不能使用百分比作为 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：

 code> $（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 -

I was trying to create triangles in CSS for a responsive site today and couldn't find a good example on stackoverflow, so here's how I did it.

解决方案

Making angular shapes responsive is a little tricky because you can't use percentages as border values in your CSS, so I wrote a couple functions to calculate the page width and resize a triangle accordingly. The first calculates the size on loading the page, the second recalculates the size as the page width changes.

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

Here's a jsFiddle - http://jsfiddle.net/craigcannon/58dVS/17/

这篇关于使用CSS创建响应三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！