CSS for slant diagonal line

Can some CSS expert help guide me to achieve slant line in a box via css. I can't attached the image. I know this can be done but lack of expert knowledge over css I am missing the way to achieve this. I am referring to this example. If you go end of the page (slanthowto.html) there is a image which show only slanted 开发者_Go百科black line... I want to implement the same.

Regards,

That's the CSS and HTML code for the slanted black line:

.borderdraw {
  border-style:solid;
  height:0;
  line-height:0;
  width:0;
}

<div style="position: relative; width: 100px; height: 100px;">
<div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(64, 0, 0); border-width: 0px 0px 65px 87px;" class="borderdraw"><!-- --></div>
<div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(255, 240, 240); border-width: 0px 0px 64px 85px;" class="borderdraw"><!-- --></div>
    </div>

EDIT: You can also copy the properties from the class to the style attribute:

<div style="position: relative; width: 100px; height: 100px;">
  <div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(64, 0, 0); border-width: 0px 0px 65px 87px; border-style: solid; height: 0; line-height: 0; width: 0;"><!-- --></div>
  <div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(255, 240, 240); border-width: 0px 0px 64px 85px; border-style: solid; height: 0; line-height: 0; width: 0;"><!-- --></div>
</div>

Update for 5 years later (2015)...

2D transforms enjoy much better support now. They'll also do the work of eliminating that "crunch" or jagged edges you may have seen with the previous method. CSS below.

.slanted-line {
  width: 300px;
  background: black;
  height: 2px;
  /* bonus rounded edges */
  border-radius: 1px;
  transform: rotate(-45deg);
  -os-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  /* helps with positioning */
  transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
}

<div class="slanted-line"></div>

Browser support according to caniuse.com:

• IE 9+
• Firefox 31+
• Chrome 31+
• Safari 7+
• Opera 27+
• iOS Safari 7.1+
• Android Browser 4.1+
• Mobile Chrome 41+

DEMO EXAMPLE

Don't use this method. No seriously, don't. Look at the date at the bottom of the page. It says

Last modified: Thu Jan 30 21:56:16 Romance Standard Time 2003

That's seven years ago. Technology's moved on. We don't do this anymore. Just go use any graphics manipulation software, draw yourself a triangle, and use either of these two techniques to stick a image into your webpage.

First of all, the image. Here's one I created in Paint earlier:

Then, with either the img tag

<img src="triangle.png" alt="Triangle!" />

or the background, with CSS method

<div class="triangle"></div>


.triangle {
    background: url('triangle.png') no-repeat;
    width: 120px;
    height: 120px;
}

That's better, isn't it.