CSS for slant diagonal line

Question

Hi

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 black line... I want to implement the same.

Regards,

Answer 1

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

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

The CSS:

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

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>

Answer 2

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.