使用CSS创建响应三角形
我当前试图在CSS中为响应式站点创建三角形，并且无法在stackoverflow上找到一个好例子，所以这就是我如何做到的。
使角度形状响应有点棘手，因为你不能在CSS中使用百分比作为border值，所以我编写了几个函数来计算页面宽度并相应地调整三角形的大小。 第一个计算加载页面时的大小，第二个重新计算页面宽度更改时的大小。
CSS：
.triangle { width: 0; height: 0; border-top: 50px solid rgba(255, 255, 0, 1); border-right: 100px solid transparent; }
HTML：
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/
通过利用根据父级宽度计算的填充来覆盖大的固定宽度三角形，可以使用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; }
这是一个小提琴 。 有关这些工作方式以及向下，向左和向右指向三角形片段的完整说明，请参阅我关于Pure CSS响应三角形的文章。 CSS给出的是一个基本高度比为2的三角形。试图改变三角形的比例，而不知道这些三角形的假响应如何复杂。
您可以使用简单的CSS实现相同的function
要使其响应，请在媒体查询中使用它。
试试下面的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; }