Menu
I need to draw in my div diagonal line. It should look like this:
My HTML:
<div style="height: 28px; width: 28px; border: 1px solid rgb(219,225,230);background-color:white;" >
</div>
Is it possible to do it only with CSS?
352
From a CSS point of view, a diagonal line is nothing but a horizontal line which is rotated at +45 or -45 degrees angle. So, to draw a diagonal line in CSS, we have to simply rotate a normal horizontal line at an angle of + or – 45 degrees. The rotation in CSS is done using the transform property.
In order to make oblique lines with CSS, there are two main approaches. The first approach involves the clip-path property of CSS and in the second approach, we use transform property with skew() of CSS. Approach 1: Using clip-path property: The clip-path property is generally used to clip an element to a basic shape.
width: 100px; The fun thing though, is that you can turn it into a diagonal just by changing the degree of rotation! To move the line around the page you can add the parameters translateX and translateY to the transform property. This will move the line along the X and Y axis respectively.
fill(60, abs((x - b)/2 ) + abs((y - a)/2), 100); and this: y += 25; to get a diagonal movement.
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.
133
Using CSS transform property you can achieve this. Look at the following HTML and CSS.
HTML
<div style="border: 1px solid #000; width:100px; height:100px;">
<div id="hr" style="border-top:1px solid #ff00ff; height:100px; margin-left:-140px;"></div>
</div>
CSS
#hr {
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
DEMO
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
