3

I'm wondering how to make a border-bottom property have different colors, as shown in this image below. Initially, I was thinking about making the border-bottom a gradient, but then I did not know how well that would work. Any suggestions?

Is there a way to make the border more rigid instead of a gradient as shown in this fiddle: http://jsfiddle.net/agusesetiyono/796XC/7/light/

enter image description here

Shrey
  • 522
  • 8
  • 16

2 Answers2

2

You can add the border using unordered lists and pure CSS like this

Follow this example:

http://codepen.io/anon/pen/dogMKy

HTML:

<div class=container>
  <div>
    <h4>Howdy, this is multiple colors of border-top. Actually it's not border, it's just multiple list item. </h4>
  </div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

CSS:

* {
  margin:0;
  padding:0;
  font-family:segoe UI;
}

.container {
  width:400px;
  margin: 150px auto 0 auto;
  border-top:1px solid #95a5a6;
  border-left:1px solid #95a5a6;
  border-right:1px solid #95a5a6;
  border-bottom:1px solid #95a5a6;
}

ul {
  list-style:none;
  width:100%;
  font-size:0;
}

li {
  display:inline-block;
  width:20%;
  height:7px;
}

li:nth-child(1) {
  background:#2ecc71;
}

li:nth-child(2) {
  background:#3498db;
}

li:nth-child(3) {
  background:#f1c40f;
}

li:nth-child(4) {
  background:#e74c3c;
}

li:nth-child(5) {
  background:#9b59b6;
}

div {
  margin: 20px;
}

h4 {
  color:#95a5a6;
  text-align:center;
}
feco
  • 4,384
  • 5
  • 27
  • 44
1

Look at this codepen. It gives you a good understanding of what kind of CSS elements are required to make this image:

https://codepen.io/timteeling/pen/aiFcn

Here is the CSS:

body { background: #eee; }

h1 {
  margin: 30px auto;
  text-align: center;
  width: 750px;
  color: #222;
  font-size: 6em;
  /*text-transform: uppercase;*/
  font-family: futura,'avenir next condensed', 'arial narrow', sans-serif;
  font-weight: 700;
    background-image: -webkit-linear-gradient(0deg, hsla(175,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 50%, hsla(25,70%,40%,1) 50%, hsla(25,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 83.333333%, hsla(300,70%,40%,1) 83.333333%);
    background-image: -moz-linear-gradient(0deg, hsla(175,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 50%, hsla(25,70%,40%,1) 50%, hsla(25,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 83.333333%, hsla(300,70%,40%,1) 83.333333%);
    background-image: linear-gradient(to right, hsla(175,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 50%, hsla(25,70%,40%,1) 50%, hsla(25,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 83.333333%, hsla(300,70%,40%,1) 83.333333%);
    -webkit-background-size: 100% 5px;
    -moz-background-size: 100% 5px;
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-position-y: bottom;
}
Nick
  • 31
  • 4