Question

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:

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