CSS for Slant Diagonal Line

CSS for slant diagonal line

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>

Slanted diagonal line in html or css?

Based on CSS3 linear-gradients solution except that the angle is not hard coded:

table:nth-of-type(1) td {  background-image: linear-gradient(    to top right,    white 48%,    black,    white 52%  );}table:nth-of-type(2) td {  background-image: linear-gradient(    to top right,    papayawhip calc(50% - 1px),    black,    papayawhip calc(50% + 1px)  );}/* for testing */table {  border-collapse: collapse;  margin-top: 1em;  margin-bottom: 1em;}td:nth-child(odd) {  width: 10em;}td:nth-child(even) {  width: 20em;}

<table border="1">  <tbody>    <tr>      <td>Narrow</td>      <td>Wide</td>    </tr>    <tr>      <td>Narrow</td>      <td>Wide</td>    </tr>  </tbody></table><table border="1">  <tbody>    <tr>      <td>Narrow</td>      <td>Wide</td>    </tr>    <tr>      <td>Narrow</td>      <td>Wide</td>    </tr>  </tbody></table>

draw diagonal lines in div background with CSS

You can do it something like this:

<style>
    .background {
        background-color: #BCBCBC;
        width: 100px;
        height: 50px;
        padding: 0; 
        margin: 0
    }
    .line1 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid red;
        -webkit-transform:
            translateY(-20px)
            translateX(5px)
            rotate(27deg); 
        position: absolute;
        /* top: -20px; */
    }
    .line2 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid green;
        -webkit-transform:
            translateY(20px)
            translateX(5px)
            rotate(-26deg);
        position: absolute;
        top: -33px;
        left: -13px;
    }
</style>
<div class="background">
    <div class="line1"></div>
    <div class="line2"></div>
</div>

Here is a jsfiddle.

Improved version of answer for your purpose.

CSS diagonal lines - how to fit into its parent element?

You can draw the lines with pseudo elements.

.diagonal-container {  border: 1px solid #000;  width: 400px;  height: 400px;  margin: 0 auto;  position: relative;  overflow: hidden;}
.diagonal-container:before {  border-top: 1px solid #ff00ff;  content: '';  position: absolute;  top: 0; left: 0; right: -50%;  transform: rotate(45deg);  transform-origin: 0 0;}
.to-right:before {  right: 0; left: -50%;  transform: rotate(-45deg);  transform-origin: 100% 0;}

<div class="diagonal-container to-right"></div>
<div class="diagonal-container to-left"></div>
<div class="diagonal-container to-right"></div>

How to draw many diagonal lines[right hash lines] using css, html?

.bar {
    width: 200px;
    height: 25px;
    background: #6FD967;
    border-right: 150px solid green;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        transparent 1px,
        green 7px
      ),
      linear-gradient(
        to bottom,
        transparent,
        transparent
      )
  }

Working Fiddle: https://jsfiddle.net/mamata/q3ef8b7d/

How to draw diagonal lines with css

You can achieve the desired effect by using just one single div. Check the DEMO.

div{
  border:1px solid gray;
  width:28px;
  height:28px;
  position:relative;
}

div:after{
  content:"";
  position:absolute;
  border-top:1px solid red;
  width:40px;
  transform: rotate(45deg);
  transform-origin: 0% 0%;
}

Note: please add the vendor prefix for older browsers i.e. -moz, -webkit.

Is it possible to draw a diagonal line using CSS3?

yes it is, there is more then one possibility:

You could use a hr element or a other element and rotate it. Here is a demo:

And yes it works in IE to :)

http://jsfiddle.net/LqFAX/

   -moz-transform: rotate(7.5deg);  
     -o-transform: rotate(7.5deg);  
-webkit-transform: rotate(7.5deg);  
    -ms-transform: rotate(7.5deg);  
        transform: rotate(7.5deg);  
           filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',  
                  M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104);
     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104,sizingMethod='auto expand')";

             zoom: 1;

CSS Diagonal Lines with filled space

Diagonal line with a solid color under the line...

html

<div class="uguu"></div>

css

.uguu {
    line-height:0;
    width:0;
    border-top:20px solid transparent;
    border-right:100px solid green;
}

fiddle: http://jsfiddle.net/83Wyy/

---

Related Topics