Geek Answers Handbook

Partitioning borders?

Is there a way to split the border in sections in CSS? So in this fiddle I have a border. But instead of having one solid color, how can I use it so that then it is like this , but the width would be set using JS. Therefore, select "3 colors." Then JS will get a width that will be 33%, then CSS will set the color for each of them. Ideas?

So something like

top{ border-top: 4px solid blue; }

Then change the width and get more than one color

+7
javascript html css
source share
4 answers

Hello, there are three possible solutions that I like, and using in my project uses a color bar. and with css I just "repeat-x". It works like a charm enter image description here

The second solution uses CSS3 Gradients, but I do not recommend this way due to the compatibility issue with Cross Browser specifically IE.

The third solution uses this color bar as Border-Image, but remember that this may have problems with older browsers.

I recommend one solution, but in the end the choice is yours. Good luck

+1
source share

No, I don’t believe that there is - that is, I don’t know how one element can have the width of the border of one of its sides wide. But why not just use a few elements?

The idea is to group a bunch of divs horizontally and then just target the ones you want to have different widths.

This solution will simply force the induced div to have a border of 10 pixels wide. Please note: the absence of spaces between divs (they are all on the same line) - a space between them will result in spaces in the color line.

You will see that I am using a class common to each div (border). I used another to dictate the color, and another to dictate the default thickness.

Finally, I divided the screen width (100%) by the number of divs that I have (4). Since you have 8 different colors, you should set the width to 12.5%, not 25%.

 <!DOCTYPE html> <html> <head> <style> .border { border-top: solid 5px transparent; width: 25%; display: inline-block; padding: 0px; margin: 0px; } .border:hover { border-top-width: 10px; } .thick { border-top-width: 7px; } .thin { border-top-width: 3px; } .red { border-color: red; } .blue { border-color: blue; } .yellow { border-color: yellow; } .green { border-color: green; } </style> </head> <body> <div class='border red thick'></div><div class='border blue thin'></div><div class='border green'></div><div class='border yellow'></div> </body> </html>
0
source share

Check out this article. They recommend that you do this in the same way as your HR, but instead use the http://www.sitepoint.com/rainbow-border-with-sass/ pseudo-elements.

This can be done with a border image, but it has limited support ( http://caniuse.com/border-image ). If you are interested in this approach, check out this code handle - http://codepen.io/samarkandiy/pen/lvrBn

Here is what I designed to show you how it can work - http://jsfiddle.net/29gPg/

 .border { background-color: black; background-size: 50px 50px; display: inline; float: left; margin: 15px; position: relative; border-width: 20px; width: 160px; height: 160px; } .border { border-image: linear-gradient(90deg, #9b59b6 0%, #9b59b6 25%, #34495e 25%, #34495e 50%, #f1c40f 50%, #f1c40f 75%, #e67e22 75% ) 2%; border-top-width: 10px; border-bottom: 0px; border-left: 0px; border-right: 0px; }

One final thought, if you plan to use CSS to change this border on the fly, the CSS should be on the line, otherwise you will have to create a bunch of gradient gradient CSS images first, and then apply them through the class name.

Edit - a border image is used, but only works in WebKit (maybe ie11, but not tested)

This question reached its interest, so I went ahead with a JSFiddle demo. http://jsfiddle.net/K2FEm/5/

Edit 2

So, it would seem that the border image is not supported by FF at all, or at least it does not use gradients, as shown here - http://css-tricks.com/examples/GradientBorder/ .

However, there is a trick that you can use to use the same gradient (this time with the corresponding browser prefix) as the background image and position it correctly. You can see the results in this script below, if you want to set different colors, you will either have to write a script in JS / JQuery to dynamically build the gradients, and then apply them to the elements in the line or do as I am and do it beforehand certain classes, which can then be applied at will (this is usually the preferred method for speed and memory, but you can go with the first option for convenience).

I built my first gradient manually and then got all the browser prefixes using http://www.colorzilla.com/gradient-editor/ (This is a great tool that I use all the time.)

Demo

0
source share
  • create as many 'span' elements as partitions
  • set the width of each "range" depending on the number of sections
  • set an arbitrary background color for each section
  • Add them to the target div

HTML:

 <div id="box"></div>

CSS

 #box { background-color: black; margin: 15px; position: relative; width: 90%; height: 40px; padding: 0; } .border_section{ height: 4px; display: block; float: left; }

JavaScript:

 var sections = Math.ceil(Math.random()*20); var target_div = document.getElementById('box'); var target_width = target_div.offsetWidth; var sec_width = Math.ceil(target_width/sections); for(i=0;i<sections;i++){ if(i == sections-1){ sec_width = target_width - ((sections-1)*sec_width)-1; } var borderSection=document.createElement("span"); borderSection.className = "border_section"; borderSection.style.backgroundColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6); borderSection.style.width = sec_width+'px'; target_div.appendChild(borderSection); }

Demo

0
source share

More articles:


All Articles