我当前试图在CSS中为响应式站点创建三角形,并且无法在stackoverflow上找到一个好例子,所以这就是我如何做到的.
解决方法
使角度形状响应有点棘手,因为你不能在CSS中使用百分比作为边界值,所以我编写了几个函数来计算页面宽度并相应地调整三角形的大小.第一个计算加载页面时的大小,第二个重新计算页面宽度更改时的大小.
CSS：
.triangle {
width: 0;
height: 0;
border-top: 50px solid rgba(255,255,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,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,1)'
});
$(".triangle").css({
"border-right": windowWidthR / 1.5 + 'px solid transparent'
});
});
这是一个jsFiddle – http://jsfiddle.net/craigcannon/58dVS/17/
