如何创建带有背景的三角形形状(固定高度,宽度= 100%)
How to create an triangle shape (fixed height, width=100%) with background
>我有一个图形背景,我需要在左上角显示一个彩色三角形(取决于分辨率)。
我可以仅使用 HTML/CSS/JS 创建宽度 = 100% 且高度 = 200px 且背景 = 红色的三角形元素吗?
我可以通过 IMG 以 width=100% 创建它,但我希望有比调整图像大小更好的解决方案。
该解决方案需要与IE7+兼容并使用浏览器版本(超过2%)。
谢谢
由于您无法创建具有百分比的边框,因此请尝试改用 vw(查看器宽度)。所以:
.triangle{
width: 0;
height: 0;
border-bottom: 600px solid blue;
border-left: 100vw solid transparent;
}
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>
为了扩展web-tiki的答案,我认为这实际上是你要做的:
$(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>
我认为最好使用背景而不是边框:
.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%);
只需取一个div 元素,给出一个类名"三角形左上角",然后写下下面给定的 css
.triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
边框顶部的颜色将是div的背景颜色。这里是红色的。有关更多三角形结构,请点击此链接。[http://css-tricks.com/examples/ShapesOfCSS/][1]
相关文章:
- 设置正文高度宽度 CSS 表达式
- 更新画布上的高度/宽度并重新开始绘制
- 使用 Jquery 加载页面时的高度宽度问题
- 修改网格高度/宽度
- 通过在运行时使用 CSS 设置其高度/宽度来拉伸 img 会产生奇怪的渐变
- 模态框高度宽度根据 iframe 的高度宽度进行固定
- 在使用Javascript / Asp.net 上传之前获取文件高度宽度
- 如何使图像无论屏幕高度/宽度如何都停留在屏幕底部
- 使用CSS旋转元素后使用高度/宽度100%
- 将元素高度/宽度设置为百分比值和像素值的组合
- JQuery - 同时设置css和实际宽度/高度宽度一个函数
- ExtJS门户布局问题(内部元素的自动高度/宽度)
- CSS/Javascript解决方案,可根据图像方向自动应用高度/宽度属性
- JavaScript/JQuery函数来获取HTML元素的原始高度/宽度
- 拉伸高度/宽度以适应屏幕