如何用背景创建三角形形状（固定高度，宽度= 100％）

本文介绍了如何用背景创建三角形形状（固定高度，宽度= 100％）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我有一个图形背景，我需要在左上角显示一个彩色三角形（独立于分辨率）。 我可以使用HTML / CSS / JS创建一个三角形形状的元素，宽度= 100％，高度= 200px，背景=红色？ 我可以通过IMG创建width = 100％，但我希望一个更好的解决方案，而不是调整图像大小。 解决方案需要与IE7 +兼容并使用浏览器的版本（超过2％）。 感谢方案要展开 web-tiki的回答，我想这实际上是你要去for： $（document）.ready（function（）{function triangle（）{$（＃wrap .tr）。css （{border-left：$（'＃wrap'）。width（）+px solid #fff，border-bottom：200px solid transparent}）;} .on（'resize'，triangle）;}）; body {background：#fff;}＃wrap {position：relative; min-height：500px;背景：teal;}。tr {position：absolute; left：0; top：0;} < script src = ：//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< div id =wrap> < div class =tr>< / div>< / div> I have a graphic background, and I need to display a colored triangle in the top left corner (independing the resolution). Can I create a triangle shaped element using only HTML/CSS/JS with width = 100% and height = 200px with background = red?I can create it by IMG with width=100%, but I was hoping for a better solution than resizing an image.The solution needs to be compatible with IE7+ and using browser's versions (more than 2%).Thanks 解决方案 To expand on web-tiki's answer, I think this is actually what you're going for:$(document).ready(function() { function triangle() { $("#wrap .tr").css({ "border-left": $('#wrap').width() + "px solid #fff", "border-bottom": "200px solid transparent" }); } triangle(); $(window).on('resize', triangle);});body { background: #fff;}#wrap { position: relative; min-height: 500px; background: teal;}.tr { position: absolute; left: 0; top: 0;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div id="wrap"> <div class="tr"></div></div> 这篇关于如何用背景创建三角形形状（固定高度，宽度= 100％）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！