Drawing line with css

Cyber Living

Do you want some simple lines (vertical, horizontal,diagonal or slanting) but without using images?

It is quite simple really. By using CSS, you can create the above listed lines as well as circle.

Let us start with the simpler ones, that is horizontal and vertical lines. To do so, simply create a div element and define the border on one side and you already have a line then define its position so you can place it at the exact location you wish the line be displayed by using a combination of the top, left, bottom, right properties together with the position: absolute, position: relative or position: fixed.

Vertical line example:

*You may also use border-right with the same values and it will have the exact same result. The bigger height it is the longer the vertical line.

Horizontal line example:

*You may also use border-bottom.

For a diagonal line first create a vertical or horizontal line then add the rotate property.

Diagonal line example:

*A diagonal line is a horizontal or vertical line that is rotated at an angle.
**The -webkit-transform: rotate(xxdeg), -moz-transform: rotate(xxdeg), -o-transform: rotate(xxdeg), -ms-transform: rotate(xxdeg) and transform: rotate(xxdeg) all do the same thing. But each only works for a specific browser.
***Always supply the same angle to all, otherwise it will be displayed differently on different browsers.

For a circle, it is still a div element with rounded corners.
Circle Example:

**The value of the border-radius must be half that of the side (or half of the height or width value).

#body
height: 240px;
border-left: 1px solid blue;
position: absolute;
top: 120px;
left: 450px;
>

#left_arm
height: 130px;
border-right: 1px solid blue;
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-o-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
position: absolute;
top: 140px;
left: 400px;
>

#right_arm
height: 130px;
border-right: 1px solid blue;
-webkit-transform: rotate(130deg);
-moz-transform: rotate(130deg);
-o-transform: rotate(130deg);
-ms-transform: rotate(130deg);
transform: rotate(130deg);
position: absolute;
top: 140px;
left: 500px;
>

#left_leg
width: 180px;
border-bottom: 1px solid blue;
-webkit-transform: rotate(100deg);
-moz-transform: rotate(100deg);
-o-transform: rotate(100deg);
-ms-transform: rotate(100deg);
transform: rotate(100deg);
position: absolute;
top: 448px;
left: 345px;
>

#right_leg
width: 180px;
border-bottom: 1px solid blue;
-webkit-transform: rotate(80deg);
-moz-transform: rotate(80deg);
-o-transform: rotate(80deg);
-ms-transform: rotate(80deg);
transform: rotate(80deg);
position: absolute;
top: 448px;
left: 376px;
>

Of course this is not how you would use a line to style your page but just to give you an idea as to what extent you can do with it and what has just been demonstrated is the very basic. There are more that you can do with it specially when used together with javascript or similar language.
Back to CyberLiving home page

Источник

Drawing Decorative Lines With CSS

In this short article we’ll explore drawing decorative lines with CSS using Pseudo Elements, Background Images, and SVG. After reading you’ll have learned a couple of interesting techniques for drawing section separators or other decorative line elements with CSS.

Pseudo elements

We can generate a pseudo-element using the ::before or ::after selectors. This adds a new child to our targeted element that we can then style as if it was a normal element.

To get the browser to render the pseudo-element we need to set the content property.

.my-element::before  content: "I'm a pseudo-element!"; background: pink; padding: 0.25rem; >

Now to create a decorative line we position our pseudo-element inside the element we want to draw a line in.

In the demos below I’ve centered the text and given the element a height so we can clearly see the horizontal line running behind the text, note that these properties are not shown in the example CSS.

.my-element  position: relative; z-index: 0; > .my-element::before  /* we want to draw a line, so no content needed */ content: ''; /* this sets the position and size of the pseudo-element */ position: absolute; top: 50%; width: 100%; height: 2px; background-color: pink; /* draw behind child elements */ z-index: -1; >

This method gives us a lot of flexibility but uses absolute positioning which requires the parent element to have relative positioning. This is because an element with position absolute is positioned relative to the first parent element found that has positioning explicitely set to relative .

This works pretty well but can cause issues when other child elements have z-indexes applied or want to be positioned relative to an element further up in the DOM tree.

We can avoid the positioning issue by using a border like this.

.my-element  box-shadow: inset 0 0 0 1px #777; color: #777; > .my-element::before  content: ''; display: block; padding-top: 2.5rem; margin-bottom: -2.5rem; border-bottom: 2px solid pink; >

Still it feels a bit like a hack to create an element to draw a line and now we need to know the height of the parent element.

Background images

We can use linear-gradient , radial-gradient , and conic-gradient to “generate” background images. Combined with background-size , background-position , and background-repeat we can use these gradients to “cheat” and draw a simple line.

.my-element  background-image: linear-gradient(pink, pink); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 center; >

This is a lot cleaner already, we can make this even better by creating a separate decorative-line class and defining a couple CSS properties.

p class="my-element decorative-line">Hello!p>

.decorative-line  background-image: linear-gradient(var(--line-color), var(--line-color)); background-repeat: no-repeat; background-size: 100% var(--line-height); background-position: 0 center; > .my-element  --line-color: pink; --line-height: 2px; >

Now we can apply the decorative-line class to an element and set the —line-color and —line-height properties to style it.

We can now also fade-in and fade-out lines.

.my-element  background-image: linear-gradient( to right, pink, white 35%, white 65%, pink ); background-repeat: no-repeat; background-size: 100% 2px; background-position: 0 center; >

We can still set a background color and have multiple other background images on the target element.

.my-element  background-color: lavenderblush; background-image: linear-gradient(pink, pink), linear-gradient(palevioletred, palevioletred); background-size: 100% 2px, 2px 100%; background-position: 0 center, 25% 0; background-repeat: no-repeat; >

SVG data URIs

We can also set background images using SVGs but unfortunately we cannot use CSS variables inside the SVG data URI.

.my-element  background-image: url('data:image/svg+xml,\  '); >

I haven’t tested this but I suspect using SVGs is slower than linear-gradient as it requires the browser to decode and draw the SVG. nonetheless SVG is very powerful so might be the way to go if you need to draw very exotic lines.

Conclusion

There’s multiple ways we can draw decorative lines with CSS. We found pseudo elements give us a lot of flexibility but also require positioning that could introduce side effects.

Using generated background images instead can be a nice work around and doesn’t introduce the positioning problems that pseudo-elements can cause.

SVGs are also a nice alternative but can’t be styled with CSS Custom Properties and might be a bit slower than linear gradients.

I share web dev tips on Twitter, if you found this interesting and want to learn more, follow me there

At PQINA I design and build highly polished web components.

Make sure to check out FilePond a free file upload component, and Pintura an image editor that works on every device.

Источник

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.

Источник

Читайте также:  Url encode html encode