2

グラフィックの背景があり、左上隅に色付きの三角形を表示する必要があります（解像度とは関係ありません）。

幅=100％、高さ= 200px、背景=赤のHTML / CSS / JSのみを使用して三角形の要素を作成できますか？

width = 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

VwユニットはIE8でサポートされていません。これらのユニットをサポートしていないブラウザーには、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;
}

border-topの色は、divの背景色になります。ここでは赤です。その他の三角形の構造については、このリンクをたどってください。[ http://css-tricks.com/examples/ShapesOfCSS/] [1]

于 2014-11-04T07:19:59.943 に答える