使用 CSS 创建响应式三角形 [英] Creating responsive triangles with CSS

问题描述

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

解决方案

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

CSS:

.triangle {宽度:0；高度:0；边框顶部:50px 实心 rgba(255, 255, 0, 1);border-right: 100px 实心透明；}

HTML:

JS:

$(document).ready(function () {var windowWidth = $(window).width();$(".三角形").css({"border-top": windowWidth/2 + 'px solid rgba(255, 255, 0, 1)'});$(".三角形").css({border-right":windowWidth/1.5 + 'px 实心透明'});});$(window).resize(function () {var windowWidthR = $(window).width();$(".三角形").css({"border-top": windowWidthR/2 + 'px solid rgba(255, 255, 0, 1)'});$(".三角形").css({border-right":windowWidthR/1.5 + 'px 实心透明'});});

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

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 创建响应式三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！