0

I made a half-circle, and I want to color it according to the percentage I need. The position of the text doesn't matter for now. What I want is to have 50% of the border colored. Later I will need 70% and 80%. How do I do that?

.info__radius__outline {
  width: 20%;
  height: 6em;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 10px solid gray;
  border-bottom: 0;
  display: inline-block;
}
<div class="info__radius__outline">
  <div class="info__radius">
    <p class="info__radius__text">70</p>
  </div>
</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
siberian l_wolk
  • 7
  • 1
  • 8

4 Answers4

3

You may use a pseudo and rotate it, set rotation via class or js to stick to the value written.

Demo below uses animation to show effect

.info__radius__outline {overflow:hidden;}
.info__radius,
.info__radius:before {
  position: relative;
  width: 20%;
  height: 10vw;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 10px solid rgba(0,0,0,0); 
  border-bottom: 0;
  display: inline-block;
  text-align:center;
}

.info__radius:before {
  content: '';
  position: absolute;
  bottom: 0px;
  width:auto;
  left:-10px;
  right:-10px;
  transform-origin: bottom center;
  transform: rotate(-180deg);
  border-color: gray;
  /* demo */
  animation: rot 5s infinite linear alternate;
}
@keyframes rot {
  80%, to {
    transform: rotate(0deg);
  }
}
.info__radius.p70:before {
  transform: rotate(-54deg);/* remove 30% : do  (180deg / 10) * 3  .*/
  animation:none;
}
<div class="info__radius__outline">
  <div class="info__radius">
    <p class="info__radius__text">70</p>
  </div>
</div><div class="info__radius__outline">
  <div class="info__radius p70">
    <p class="info__radius__text">70</p>
  </div>
</div>
a few similar examples

About the gradient idea where you would need 2 gradients and background-clip to draw them on 2 differents parts:

  • 1 gradient will be drawn on the center away from the transparent borders

  • the other with the half colored (alike the pseudo) also drawn under the borders area.

  • Gradient can be rotated every 18deg for each 10% .

.info__radius {
  position: relative;
  width: 20%;
  height: 10vw;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 10px solid rgba(0,0,0,0); 
  box-sizing:border-box;
  border-bottom: 0;
  display: inline-block;
  text-align:center;
  background:   
    linear-gradient(rgba(209, 109, 91,0.7) ,rgba(0,0,0,0.5)) no-repeat center  ,/* can be (white,white) to hide portion of the next gradient*/
    linear-gradient(-54deg, transparent 50%, turquoise 50%) -10px -10px 
   ;
  color:white;
  background-size: auto auto, calc(100% + 20px) calc(200% + 40px);
  background-clip: content-box,border-box;
   
  /*demo */
  box-shadow:0 0 0 2px gray, inset 0 0  2px 1px black;
}

.info__radius.p25 {
 line-height:8vw;
  background:   
    linear-gradient(rgba(255,255,255,0.7) ,rgba(255,255,255,0.7)) no-repeat center  ,
    linear-gradient(-135deg, transparent 49%,black 50%, turquoise 50%) -10px -10px 
   ;
  color:tomato;
  font-weight:bold;
  background-size: auto auto, calc(100% + 20px) calc(200% + 40px);
  background-clip: content-box,border-box;

}

.info__radius {float:left;margin:1em;}
<div class="info__radius__outline">
  <div class="info__radius">
    <p class="info__radius__text">70</p>
  </div>
</div>

<div class="info__radius__outline">
  <div class="info__radius p25">
    <p class="info__radius__text">25%</p>
  </div>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • It's a very good solution so far, but I want to see if it can be done without the animation. If no one answers better than this, I will make this top answer because it solves my problem of quarter-circle – siberian l_wolk Jan 29 '17 at 23:54
  • 1
    without animation! you just delete after /*demo*/ and play with transform: rotate(-70deg); – Baraa Al-Tabbaa Jan 30 '17 at 02:46
  • @siberianl_wolk maybe you did not get notified about Baara Al-Tabaa comment which answers to yours _ *without animation! you just delete after /*demo*/ and play with `transform: rotate(-70deg);`* _ i also updated the snippet (explanation in css comment how to calculate deg/%) and added a second snippet with gradients (i kept the borders, see background-clip to compare to the other answer ) – G-Cyrillus Jan 30 '17 at 18:39
0

You're probably looking for CSS3 gradients. This will have gradual change between two colors (between gray and red for example). It could be done radially or linearly.

If you want more distinct colors (no blending), I believe you can achieve it with gradients and browser specific CSS, see here. But if you just want it radially: the outline property can achieve this look, if you just change the ratio of wishes between the border and outline.

If you'd like better answers about css, pictures would be great.

Community
  • 1
  • 1
Mxt
  • 166
  • 2
  • 17
0

how about this? if you don't mind changing some code.

[HTML]

<div class="info_radius">70</div>

[CSS]

.info_radius {
    width: 20%;
    height: 6em;
    padding: 2%;
    color: #000;
    border: 10px solid transparent;
    text-align: center;
    box-sizing: border-box;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%), linear-gradient(90deg,rgba(30,87,153,1) 0%,rgba(43,226,147,1) 18%,rgba(226,207,36,1) 35%,rgba(224,83,35,1) 66%,rgba(218,35,224,1) 81%,rgba(125,185,232,1) 100%);
    border-radius: 110px 110px 0 0;
    border-bottom: 0;
}

https://jsfiddle.net/978zLw2q/

ElChiniNet
  • 2,778
  • 2
  • 19
  • 27
ha_ryu
  • 568
  • 2
  • 7
  • 20
0

This is just another solution, similar to the first solution from @GCyrillus but with a different approach, using a pseudo element and an overflow hidden container. For the animation, a keyframe animation has been used:

#radius {
    height: 100px;
    overflow: hidden;
    position: relative;
    width: 200px;
}

.radius-outline {
    -moz-animation: anim 3s infinite linear alternate;
    -webkit-animation: anim 3s infinite linear alternate;
    animation: anim 3s infinite linear alternate;
    border-bottom-left-radius: 100%;
    border-left: 10px solid gray;
    border-right: 10px solid transparent;
    position: relative;
    top: 100px;
    -moz-transform-origin: right top;
    -webkit-transform-origin: right top;
    transform-origin: right top;
}

.radius-outline,
.radius-outline::after {
    border-bottom: 10px solid gray;
    border-top: 10px solid transparent;
    box-sizing: border-box;
    height: 100px;
    width: 100px;
}

.radius-outline::after {
    border-right: 10px solid gray;
    border-left: 10px solid transparent;
    border-bottom-right-radius: 100%;
    content: "";
    display: block;
    position: absolute;
    right: -110px;
    top: -10px;
}

.radius-info {
    color: gray;
    font-family: Arial;
    font-size: 16px;
    position: absolute;
    left: 50%;
    top: 70%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

@-moz-keyframes anim {
    to { transform: rotate(180deg); }
}

@-webkit-keyframes anim {
    to { transform: rotate(180deg); }
}

@keyframes anim {
    to { transform: rotate(180deg); }
}
<div id="radius">
  <div class="radius-outline"></div>
  <div class="radius-info">70%</div>
</div>
ElChiniNet
  • 2,778
  • 2
  • 19
  • 27