CODEWITHSUNDEEP
javascriptcsscss-shapes
pavel
pavel

Reputation: 27082

How to create an triangle shape (fixed height, width=100%) with background

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

Upvotes: 2

Views: 7334

Answers (5)

Steve K
Steve K

Reputation: 4921

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>

Upvotes: 2

Gerson Goulart
Gerson Goulart

Reputation: 624

I think it would be best to use background instead of borders:

.my-triangle {
   width: 100%;
   height: 200px;
   background: linear-gradient(to left top, transparent 50%, red 50%);
}
<div class="my-triangle"></div>

Note that in order for it to be cross-browser compatible you will need to fiddle around with CSS prefixes, IE filters and SVG. (I don't readily have access to IE so I'll leave that one for you, but it would be something along these lines:)

  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%);

Upvotes: 2

Pabitra Patra
Pabitra Patra

Reputation: 19

Just take a div element, give a class name 'triangle-topleft', and write the below given css

.triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

color of border-top would be the div's background color..Here it's red. For more triangle structures, follow this link.. [http://css-tricks.com/examples/ShapesOfCSS/][1]

Upvotes: 0

web-tiki
web-tiki

Reputation: 103760

Vw units aren't supported by IE8, you will need to use a JS fallback for browsers that don't support these units.

Here is a jQuery script that sets the border-width according to the window size and adjusts it on window resize. Tested in IE8 (IE tester) :

$(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>

Upvotes: 3

Amy Leaman
Amy Leaman

Reputation: 318

Because you can't create a border which has a percentage, try using vw (viewer width) instead. So: 

.triangle{
   width: 0;
   height: 0;
   border-bottom: 600px solid blue;
   border-left: 100vw solid transparent;
  }

Upvotes: 3

Related Questions