8

I know that is possible to create a circle using CSS3

Is it possible to draw a diagonal?

alexchenco
  • 53,565
  • 76
  • 241
  • 413

3 Answers3

16

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;
meo
  • 30,872
  • 17
  • 87
  • 123
  • A forked version of that same fiddle that puts a diagonal line through a DIV to make it look like a marked off calendar day. http://jsfiddle.net/LqFAX/2396/ – TadLewis Aug 28 '18 at 14:59
6

Here is a complete example, you just need to play with an angle and translation base on your dimensions.

<div style="background-color: #BCBCBC; width: 100px; height: 50px; padding: 0; margin: 0">
    <div style="width: 112px; height: 47px; border-bottom: 1px solid black; -webkit-transform:   translateY(-20px) translateX(5px) rotate(27deg); "></div>
</div>
Ru Chern Chong
  • 3,692
  • 13
  • 33
  • 43
Madman
  • 3,171
  • 2
  • 32
  • 44
2

You can:

  1. create html element (div)
  2. set background color to transparent
  3. set color to one border
  4. rotate
Arjan
  • 19,957
  • 2
  • 55
  • 48