2

我有一个图形背景，我需要在左上角显示一个彩色三角形（与分辨率无关）。

我可以仅使用宽度 = 100% 且高度 = 200px 且背景 = 红色的 HTML/CSS/JS 创建三角形元素吗？

我可以通过宽度 = 100% 的 IMG 创建它，但我希望有一个比调整图像大小更好的解决方案。

解决方案需要兼容 IE7+ 并使用浏览器的版本（超过 2%）。

谢谢

4

5 回答 5

3

因为您无法创建具有百分比的边框，请尝试改用 vw（查看器宽度）。所以：

.triangle{
   width: 0;
   height: 0;
   border-bottom: 600px solid blue;
   border-left: 100vw solid transparent;
  }
于 2014-03-15T19:16:18.637 回答
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>

于 2014-11-02T10:54:24.210 回答
2

为了扩展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>

于 2014-11-06T03:37:37.643 回答
2

我认为最好使用背景而不是边框​​：

.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%);
于 2014-11-06T22:02:19.360 回答
0

只需取一个 div 元素，给一个类名 'triangle-topleft'，然后写下给定的 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]

于 2014-11-04T07:19:59.943 回答