CODEWITHSUNDEEP
jqueryhtmlcss
Charlie Ryan
Charlie Ryan

Reputation: 43

Using css3, how do you make a diagnonal line between the top left, and bottom right corners of a containing div?

I am looking at how to create a diagonal line which will always join the top left and bottom right corners of a containing div, no matter the dimensions of the containing div, is there an way to do this using just css3? if not is there a way using jQuery and css3, and how can it be done?

Upvotes: 4

Views: 5052

Answers (3)

Vikas Harad
Vikas Harad

Reputation: 452

check cross strike over text in the following link https://jsfiddle.net/vikasharad10/kreqod8w/2/

.old-price {
  font-size:22px;
  position:relative;
}
.old-price:after {
  content:'';
  position:absolute;
  width:100%;
  height: 2px;
  background-color:black;
  left:0;
  top:50%;
  transform: rotate(-6deg);
}
<span class="old-price">$1,80,000</span>

Upvotes: 3

Van Coding
Van Coding

Reputation: 24554

CSS3 offers no possibility to draw such a line. Use a Canvas Tag and use JavaScript to draw the line.

Heres a tutorial: http://diveintohtml5.ep.io/canvas.html#divingin

Upvotes: 0

Spudley
Spudley

Reputation: 168803

In actual fact, diagonal lines are possible in CSS (contrary to @FlashFan's answer).

Two ways spring to mind:

  • There is a well-known hack involving borders, which allows you to draw irregular shapes, including diagonal lines.
    There is a good write-up of it here: http://www.infimum.dk/HTML/slantinfo.html
    As far as I know, this technique works in all current browsers. The down-side is that you may need several <div> elements to create a single shape.

  • Simply create a narrow box with a filled background colour, and use the CSS3 transform: rotate(); feature.
    This technique only works with browsers that allow elements to be rotated. Fortunately, you can rotate elements in all browsers, including IE. However the CSS for it can be quite messy, as most current browsers require a vendor prefix for the CSS, and IE has its own entirely different method of doing rotation.

The good news is both of these techniques are pure HTML/CSS, they both work in all browsers, and neither of them requires any Javascript or modern HTML5 technologies.

But both of them could be considered a bit of a hack. If you're okay with using Javascript, I'd suggest looking into the Raphael library, which again works in all current browsers.

If you're okay with locking out IE users, you can also use the HTML5 <canvas> element and simply draw a line, or SVG if you prefer vector graphics.

Upvotes: 3

Related Questions