我有图形背景,我需要在左上角显示一个彩色三角形(取决于分辨率)。
我是否可以仅使用宽度= 100%且高度= 200px且背景=红色的HTML / CSS / JS创建三角形元素?
我可以通过宽度= 100%的IMG创建它,但我希望有一个比调整图像大小更好的解决方案。
该解决方案需要与IE7 +兼容并使用浏览器版本(超过2%)。
由于
答案 0 :(得分:4)
因为您无法创建具有百分比的边框,请尝试使用vw(查看器宽度)。所以:
.triangle{
width: 0;
height: 0;
border-bottom: 600px solid blue;
border-left: 100vw solid transparent;
}
答案 1 :(得分:3)
IE8不支持Vw单位,对于不支持这些单位的浏览器,您需要使用JS后备。
这是一个jQuery脚本,它根据窗口大小设置边框宽度,并在窗口调整大小时调整它。在IE8(IE测试员)中测试:
$(document).ready(function() {
function triangle() {
var width = $('#wrap').width(),
border = width / 4;
$("#wrap .tr").css({
"border-left": border + "px solid #fff",
"border-bottom": border + "px 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;
border-left: 200px solid #fff;
border-bottom: 200px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
<div class="tr"></div>
</div>
答案 2 :(得分:2)
要扩展web-tiki's answer,我认为这实际上是您的目标:
$(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);
});
&#13;
body {
background: #fff;
}
#wrap {
position: relative;
min-height: 500px;
background: teal;
}
.tr {
position: absolute;
left: 0;
top: 0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
<div class="tr"></div>
</div>
&#13;
答案 3 :(得分:1)
我认为最好使用背景而不是边框:
.my-triangle {
width: 100%;
height: 200px;
background: linear-gradient(to left top, transparent 50%, red 50%);
}
<div class="my-triangle"></div>
请注意,为了使其与浏览器兼容,您需要摆弄CSS前缀,IE过滤器和SVG。 (我不能轻易访问IE,所以我会为你留下那个,但它会是这样的:)
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, transparent), color-stop(0.5, transparent), color-stop(0.5, #FF0000), color-stop(1, #FF0000));
background-image: -webkit-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -moz-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -ms-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -o-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: linear-gradient(to top left, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
答案 4 :(得分:0)
只需要一个div元素,给一个类名'triangle-topleft',然后写下面给出的css
.triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
border-top的颜色将是div的背景颜色。这里它是红色的。 有关更多三角形结构,请点击此链接.. [http://css-tricks.com/examples/ShapesOfCSS/][1]