Draw line with css

Содержание

Drawing lines on html page
10 Answers 10
[EDITS]
How to Draw Horizontal and Vertical Lines in CSS
How to Draw a Line with CSS?
Conclusion
About the author
Sharqa Hameed
How to draw a line with css and show text or image on it
4 Answers 4
How to Draw a Dotted Line With CSS
How to Draw a Dotted Line With CSS?
Conclusion

Drawing lines on html page

How can we draw a line in html page. I tried using canvas but found that its not working. Maybe browser doesn’t support it. Can there be other easier way.

drawing a simple straight line is really simple with HTML and CSS. could you post some code, or an image of what you are trying to achieve?

10 Answers 10

EDIT: Maybe it is little bit late but here is my new implementation. Hope it’s more readable.

function createLineElement(x, y, length, angle) < var line = document.createElement("div"); var styles = 'border: 1px solid black; ' + 'width: ' + length + 'px; ' + 'height: 0px; ' + '-moz-transform: rotate(' + angle + 'rad); ' + '-webkit-transform: rotate(' + angle + 'rad); ' + '-o-transform: rotate(' + angle + 'rad); ' + '-ms-transform: rotate(' + angle + 'rad); ' + 'position: absolute; ' + 'top: ' + y + 'px; ' + 'left: ' + x + 'px; '; line.setAttribute('style', styles); return line; >function createLine(x1, y1, x2, y2) < var a = x1 - x2, b = y1 - y2, c = Math.sqrt(a * a + b * b); var sx = (x1 + x2) / 2, sy = (y1 + y2) / 2; var x = sx - c / 2, y = sy; var alpha = Math.PI - Math.atan2(-b, a); return createLineElement(x, y, c, alpha); >document.body.appendChild(createLine(100, 100, 200, 200));

Explanation (as they say «a picture is worth a thousand words»):

@madox2, could you please add comments to your code to facilitate its readability and ease the burden on the user to reverse engineer your code? (particularly the «if(y1 < y2)

reverse engineering has a much broader use than simply understanding binary code. One can quite reverse engineer a television set if you like. This comment thread is getting a bit pedantic, no? There’s never going to be agreement or a winner, just two guys trying to have bigger balls on the internet. Let’s just drop the animosity and back and forth, eh, @John?

@Metagrapher agreed on dropping the animosity, but I don’t read pedantism in John’s objection to the word «reverse engineering», instead, I read that, to him, the words «reverse engineering» seemed like an overly harsh and insulting thing for someone to say about a piece of source code. It also seems clear that you didn’t intend to be harsh or insulting, but sometimes words carry different connotations to different people. (It also seems clear that some comments were deleted, so if this whole thing isn’t making enough sense any more, perhaps the whole thread could be deleted, including this)

FWIW I give this answer an enthusiastic thumbs up, regardless of whether I grok the details of the specific transform math code used, simply because it shows me a nice technique for how to solve a problem like this— getting some simple graphics into the html flow. Given that, I can figure out the details of the transforms on my own.

 .line < position: absolute; background-color: #000000; >.vertical < width: 1px; height: 500px; >.horizontal < width: 500px; height: 1px; >#line1 < top: 20px; left: 50%; >#line2 < top: 260px; left: 25%; >/* for added rotation effects */ .forty-five

if you want to get into diagonal lines you could begin to try some rotation with transform: rotate(45deg); The IE Compatible method of rotating objects is discussed thoroughly here, which is terribly complicated. ~~I do not know the IE compatible way to rotate divs, sorry.~~, but that would work in Safari, Firefox, Chrome, and Opera.

[EDITS]

2014/11/08 — sjc — updated transform rules. Added MozDev links and IE rotation SO links.

also, you may not want to absolutely position the div. It depends on how you are using the line. If you are just doing a horizontal rule then there is actually a tag for that, too.

i found myself needing a solution on this so i developped one using «hr» div and some gradient in border-image. Here is a Jsfiddle link to test it and the code below.

rotated

with DOMelem.style.transform =rotateZ(angle) that’s the good solution, are boring : no copy/paste, no really dynamic DOM into it, see robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html why canvas must be avoided as possible

The object is the easiest way (aside from plopping an image or using flash). Also, please post your code and tell us under what browser you’re trying to use . We can’t tell you what you’re doing wrong otherwise.

As far as support is concerned, from Wikipedia:

The element is currently supported by the latest versions of Mozilla Firefox, Google Chrome, Safari, and Opera. It is not natively implemented by Internet Explorer (IE) as of version 8[7], though support is in development for Internet Explorer 9; however, many of the Canvas element’s features can be supported in IE, for example by using Google or Mozilla plugins, JavaScript libraries and either Adobe Flash or IE’s proprietary VML.

SVG is another option, but (surprise!) IE doesn’t it support it (IE9 is supposed to support some parts of it).

I’m also not sure what kind of line you want to draw. I mean, you could just make a div and only enable one of its borders — that would be a straight line.

Источник

How to Draw Horizontal and Vertical Lines in CSS

As we know, HTML provides the structure of web pages, and CSS can be utilized to apply styles. CSS also has different styling properties that are used to draw different shapes, such as squares, circles, rectangles, ovals, lines, and more. More specifically, a line is one of design’s most versatile and commonly used elements that can be added horizontally and vertically.

This article will teach the procedure to draw horizontal and vertical lines using CSS. Let’s get started!

How to Draw a Line with CSS?

To draw horizontal and vertical lines using CSS, different properties can be utilized, such as:

Let’s move ahead to understand the working of the above-provided properties one by one!

HTML
To draw lines, firstly, we will specify the “ ” element inside the body of our HTML file:

Now, to style a div, utilize the suitable properties. In our case, we will assign the “background-color” property value as “#e4a2a4”, and the “border” property value as “2px solid #0fafc4”, which indicates its width, type, and color, respectively, and the “height” property is set as “200px”.

Example 1: Draw Horizontal Line with CSS
Usually, the

element is utilized to draw horizontal lines in HTML. However, to draw a horizontal line with CSS, add element for the heading and then place a named “h_line” inside the above-described div of the HTML file.

Horizontal Line < / h1 >
< / div >Now, use CSS properties to draw a horizontal line:

We will use the “border-bottom” property, which is associated with one to three values for line width, line type, and color. The below-provided example sets its value as “6px solid rgb(80,80,78)”.

To adjust the size of the line, we have set the “width” property value as “300px”.

The “margin” property value is set as “auto”, representing that the margin is equal from all sides. The “bottom-top” property can also be utilized for this purpose.

Now, save the HTML file and open it in your browser:

As you can see, we have drawn a horizontal line successfully with the CSS border property.

Example 2: Draw Vertical Line With CSS
To draw a vertical line, we will add tag for the heading and then place a named “v_line” inside the above-described div of the HTML file.

Vertical Line < / h1 >
< / div >Let’s provide the “v_line” div with some CSS properties. To draw a vertical line, we will utilize:

The “border-left” property is assigned with values “5px solid rgb(2, 99, 135)”, where the first value represents the line width, the second value represents the line type, and the third value indicates the color.

The “bottom-right” property can also be utilized for the same purpose.

Next, we have defined the “height” of the line by setting its value as “100px”.

Set “margin” as “0 auto”, where 0 indicates the top and bottom and auto represents the equal margin to the left and right.

To show the width of the line, we have assigned the “width” property value as “2px”.

.v_line {
border-left : 5px solid rgb ( 2 , 99 , 135 ) ;
height : 100px ;
margin : 0 auto ;
width : 2px ;
}

Applying these values will draw a vertical line like this:

That’s it! We have used different CSS properties to draw horizontal and vertical lines.

Conclusion

You can use the “border-top” or “border-bottom” properties to draw a horizontal line and the “border-left” or “border-right” properties to draw a vertical line in CSS. This property has values one to three, where the first value defines the width, the second value defines its type, whether solid, dotted, dashed, or groove and the third value indicates the color of the line. This guide has explained how to draw horizontal and vertical lines with CSS.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник

How to draw a line with css and show text or image on it

This is what I want to do: and

4 Answers 4

Wrap the text inside a span and use a :pseudo-element for the line.

Position the line(:pseudo-element) behind the span using z-index: -1 , so that you could move around the text without having to worry about the line.

.featured-images < position: relative; color: #666666; border: 2px solid #333333; padding: 0 10px 0 30px; >.featured-images span < color: #666666; background: white; padding: 0 10px; >.featured-images:after

Replicating the following:

You could use repeating-linear-gradient to do this.

body < background: #E7EAE3; >.featured-images < position: relative; color: #666666; padding: 0 10px 0 30px; overflow: hidden; >.featured-images span < color: #517575; background: white; padding: 0 10px; >.featured-images:after

Using image instead of text.

.featured-images < position: relative; color: #666666; border: 2px solid #333333; padding: 0 10px 0 30px; >.featured-images span < display: block; width: 80px; height: 13px; background: url(http://lorempixel.com/80/13) no-repeat white 10px 0; padding: 0 10px; >.featured-images:after

Источник

How to Draw a Dotted Line With CSS

In web development, the user can trace lines in different styles, including plane lines, dash lines, dotted lines, and so on. Traditionally, dotted or dashed lines indicate anything that can be sketched or cut out. They have been connected in the past to placeholder or undeveloped material in digital environments. Additionally, these lines can denote locations for drag-and-drop operations and file uploads.

This write-up will explain the method for drawing a dotted line with CSS.

How to Draw a Dotted Line With CSS?

To draw a line in HTML, users can use the “ ” tag. The “

” element draws a horizontal line on the web page. Furthermore, this line can be styled differently through CSS.

To draw a dotted line on the web page with CSS, try out the given procedure.

Step 1: Create a “div” Container

First, use the “ ” tag to create a container in the HTML page. Then, add an “id” attribute within the “div” opening tag to access it later.

Step 2: Insert Text data

Next, embed text data in between the “div” container.

Step 3: Add “

” Tag

Add a “ ” tag to insert a simple line in a webpage. Then, embed some text after the line:

It can be noticed that the line has been added successfully:

Step 4: Style “div” Container

Access the “div” container with the help of the “id” selector “#” and the value of the id as “#dotted-line”. After that, apply the below given CSS properties:

“border” adds a boundary around the element.

“color” is used for specifying the color of the text inside the element.

“margin” is utilized to add space outside the defined boundary.

Step 5: Style “

” Element

To make a list as a dotted line, first, access the “hr” element by tag name and apply the below listed CSS properties:

hr {
background-color: rgb ( 243 , 192 , 192 ) ;
border-top: 3px dotted rgb ( 10 , 53 , 245 ) ;
height: 3px;
width: 50 % ;
}

According to the given code snippet:

“background-color” property specifies the color at the backside of the element.

“border-top” is utilized for making the horizontal line dotted.

“height” and “width” are used to determine the element’s size:

It can be observed that we have successfully drawn a dotted line.

Conclusion

To draw a dotted line with CSS, first, add a simple line with the help of the “ ” tag. Then, access the “

” element by tag name in CSS. After that, apply the “border-top” or “border-bottom” property and specify its value as “dotted”. This post has explained the method for drawing the dotted line in HTML using CSS.

Источник