How would I convert these 3 div into 1 div without using border, and only background?

HTML & CSS
1 
   <div style="width: 89px; height:24px; background-color:#00ffff; border-top-left-radius:50px;border-bottom-left-radius:50px;margin: 0;">
    </div>

    <div style="width: 88px;height:24px;background-color:#ffffff;margin: -24px 0 0 88px; ">
    </div>

    <div style="width: 89px; height:24px; background-color:#ff00ff; border-top-right-radius:50px;border-bottom-right-radius:50px; margin: -24px 0px 0 177px;">
    </div>
2

One way for modern browsers is like this:

<div class="tricolor"></div>

CSS:

.tricolor {
	width: 266px;
	height:24px;
	border-radius:12px;
	background-image: linear-gradient(  to right,  #0ff 88px,  #fff 88px,  #fff 177px,  #f0f 177px  );
	margin:0 0 5px;

}

Or in your preferred inline method:

<div style="width: 266px;height:24px;border-radius:12px;background-image: linear-gradient( to right, #0ff 88px, #fff 88px, #fff 177px, #f0f 177px );margin:0 0 5px;"></div>

1 Like
3

wow. Thank you for this.

4

How would I do that same thing to these? Is it possible? cause these have borders applied to them?

The middle one has no borders on the left and right side.

<div style="margin: 0; width: 83px; height:18px; border-top: 3px solid #0059dd;border-left: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-right: 3px solid #0059dd; background-color:#000000; border-top-left-radius:50px;border-bottom-left-radius:50px;"></div>

<div style="margin: -24px 0 0 89px;width: 88px; height:18px; border-top: 3px solid #0059dd;border-bottom: 3px solid #0059dd;background-color:#000000;"> </div>

<div style="margin: -24px 0 0 177px; width: 83px; height:18px; border-top: 3px solid #0059dd;border-right: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-left: 3px solid #0059dd;background-color:#000000; border-top-right-radius:50px;border-bottom-right-radius:50px;">

--------------------------------------

<div style="margin: 0;width: 83px; height:18px; border-top: 3px solid #0059dd;border-left: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-right: 3px solid #0059dd; background-color:#00ffff; border-top-left-radius:50px;border-bottom-left-radius:50px;"></div>

<div style="margin: -24px 0 0 89px; width: 88px; height:18px; border-top: 3px solid #0059dd;border-bottom: 3px solid #0059dd;background-color:#ffffff;"></div>

<div style="margin: -24px 0 0 177px; width: 83px; height:18px; border-top: 3px solid #0059dd;border-right: 3px solid #0059dd;border-bottom: 3px solid #0059dd;border-left: 3px solid #0059dd;background-color:#ff00ff; border-top-right-radius:50px;border-bottom-right-radius:50px; "></div>
5

Can you show me how you would apply a 3px border to it?

6

Is that a serious question? You can surely see how it’s done on the first and last <div> - you must be able to apply the same principle to the middle one.

2 Likes
7

I’m stuck. How do I apply borders to the middle?

 <div style="width: 266px;height:24px;border-radius:50px;background-image: linear-gradient( to right, #0ff 88px, #fff 88px, #fff 177px, #f0f 177px );margin:0 0 5px;border: 3px solid #0059dd;"></div>
8

As Chris said above this is where you really need to get your hands dirty and try and understand the code. The example is there for you to follow and for you to learn.

This is the last time that I will spoonfeed the answer unless you take some time to learn and understand.

.tricolor {
	width: 260px;
	height:19px;
	border-radius:12px;
	background-image: linear-gradient(  to right,  #0ff 83px,#0059dd 83px, #0059dd 86px,  #fff 86px,  #fff 174px, #0059dd 174px, #0059dd 177px,  #f0f 177px  );
	margin:0 0 5px;
	border: 3px solid #0059dd;
}

HTML:

<div class="tricolor"></div>

We don’t mind if you can’t do it but we need to see that you are at least trying on your own.

2 Likes
9

As @chris says, you should be able to work it out for yourself by looking at the other sections of code - or, indeed, any of the other versions of code using borders which you have been provided with in the past. Try it, and if you really can’t do it, then post what you have and we’ll explain what’s amiss.

Edit Ninja’d by @PaulOB.

10

I’m stuck. How do I apply borders to the middle?

11

I did this already. I’m stuck on adding border to the middle one.

12

Look at my last example, it has the blue colours in the middle.

13

It’s not on the inline one:

14

This:

to right, #0ff 88px, #fff 88px, #fff 177px, #f0f 177px

is not the same as this:

to right, #0ff 83px,#0059dd 83px, #0059dd 86px, #fff 86px, #fff 174px, #0059dd 174px, #0059dd 177px, #f0f 177px

1 Like
15

I did it.

What did you change, and how did you do it?

16

I just added the extra colours into the linear gradient syntax. Linear gradients are indeed a little complex but with trial and error you can soon tweak things into position when you have an example to work from

to right = from left to right horizontally

#0ff 83px = first 83px is #0ff

'#0059dd` 83px = now abruptly change to #0059dd

#0059dd 86px = continue same color for 3 pixels

#fff 86px = abruptly change to #fff

#fff 174px = continue same color up to 174px with #fff

#0059dd 174px = abruptly change to #0059dd

#0059dd 177px = continue for 3 pixels

#f0f 177px = abruptly change to #f0f for the rest from 177px onwards.

7 Likes
18

Thank you for taking your time out to help me with this. greatly appreciated.

3 Likes
19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.