我当前试图在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/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。