使用 CSS 创建响应式三角形

Posted 2023-03-06

【中文标题】使用 CSS 创建响应式三角形

【英文标题】：Creating responsive triangles with CSS

【发布时间】：2013-07-23 11:01:39

【问题描述】：

我今天尝试在 CSS 中为响应式网站创建三角形，但在 *** 上找不到很好的示例，所以我就是这样做的。

【问题讨论】：

Chris Coyer 在 CSS-tricks.com 上有一篇很棒的文章，展示了如何使用纯 CSS 创建不只是三角形。 css-tricks.com/the-shapes-of-css

@sulfureous 是的，这是一个很棒的资源。

Responsive triangle div的可能重复

【参考方案1】：

使角形状响应式有点棘手，因为您不能在 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 用于问答，但有任何想法解释，为什么您使用% 表示rgba

还有，百分比超过100%？

@Mr.Alien 哈哈。好地方。我想我只是从 Photoshop 中复制了一个值并意外地包含了 %。现在修改。

【参考方案2】：

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

【讨论】：

当然可以，但是您必须每 10 个像素进行一次媒体查询以保持设计的一致性。

【参考方案3】：

响应式三角形可以通过利用根据父级宽度计算填充来覆盖一个固定宽度的大三角形来实现。创建一个宽度为 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。有关这些如何工作以及向下、向左和向右的三角形 sn-ps 的完整说明，请参阅我在 Pure CSS responsive triangles 上的文章。给出的 CSS 是针对底高比为 2 的三角形。试图在不知道这些三角形的假响应如何的情况下更改三角形的比例可能会很复杂。