Drawing Angled Lines in CSS

Drawing angled lines in CSS

You can create angled lines in CSS by using skew transforms (transform: skew(Xdeg)). Below is a sample snippet:

.shape {  height: 50px;  width: 200px;  border-bottom: 2px solid red;  border-right: 2px solid red;  -moz-transform: skew(-45deg);  -webkit-transform: skew(-45deg);  transform: skew(-45deg);}

<div class="shape"></div>

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.

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.

Drawing 45 Degree angle with CSS3

You should use rotate instead of skew for this. I have also changed the position of your :before element so its bottom right corner lines up with the bottom left corner of your flick class and then set the transform origin to the shared corner, creating exactly the effect you wanted (I also moved it away from the top so the effect would be visible):

.flick .text {  position: relative;  z-index: 50;}.flick {   margin-top: 200px;  background-color: #055468;  color: white;  margin-left: 140px;  padding: 15px;  position: relative;}.flick:before {  background: #055468;  content: "";  width: 100px;  height: 100%;  position: absolute;  bottom: 0;  right: 100%;  transform: rotateZ(45deg);  transform-origin: bottom right;  width: 80px;}

<div class="flick"><span class="text">Hello world</span></div>

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;

Draw a diagonal line between two points with CSS and JS

If you have to do this via CSS and Javascript, it is possible but not ideal. You'll have to do some extra work to calculate the angle between the points and the distance between your points. Take a look at the sample below:

const point1 = document.getElementsByClassName('point')[0]
const point2 = document.getElementsByClassName('point')[1]
const line = document.getElementsByClassName('line')[0]

// Find the points based off the elements left and top
var p1 = {x: point1.offsetLeft, y: point1.offsetTop};
var p2 = {x: point2.offsetLeft, y: point2.offsetTop};

// Get distance between the points for length of line
var a = p1.x - p2.x;
var b = p1.y - p2.y;
var length = Math.sqrt( a*a + b*b );

// Get angle between points
var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;

// Get distance from edge of point to center
var pointWidth = point1.clientWidth / 2;
var pointHeight = point1.clientWidth / 2;

// Set line distance and position
// Add width/height from above so the line starts in the middle instead of the top-left corner
line.style.width = length + 'px';
line.style.left = (p1.x + pointWidth)+ 'px';
line.style.top = (p1.y + pointHeight) + 'px';

// Rotate line to match angle between points
line.style.transform = "rotate(" + angleDeg + "deg)";

.wrapper {
  width: 320px;
  height: 180px;
  position: relative;
  border: 1px solid #aaa;
  background-color: #eee;
}
.point {
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: #555;
}
.line {
  position: absolute;
  height:2px;
  background-color: #d63030;
  transform-origin: left;
}

<div class='wrapper'>
  <div class='point' style='left: 40px; top: 40px;'></div>
  <div class='point' style='left: 260px; top: 120px;'></div>
  <div class='line'</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>

Drawing diagonal lines in html5

You can use an SVG:

<svg style='width: 200px; height: 200px;'>
    <line x1="0" y1="200" x2="200" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

With percentage coordinates, if needs be:

<svg style='width: 100%; height: 100%;'>
    <line x1="0" y1="100%" x2="100%" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

http://jsfiddle.net/qXKfN/2/

^{(Should work in FF, Chrome, Safari, and IE >= 9)}

---

At various sizes in various browsers, the SVG might be pushed out of its container. One solution is to set line-height: 0px;. Another solution, and probably the preferred solution, is to set position: relative; on the container and position: absolute; on the SVG.

http://jsfiddle.net/qXKfN/3/

---

Related Topics