It is necessary to make such a block on the site:

enter image description here

And in an amicable way, it is necessary that the blue border increases as time decreases, but this later, now the question is: how to do this? I wrote this:

.circle1 { color: #f3363b; font-weight: bold; border-radius: 75px; height: 100px; width: 100px; border-top: #3687f3 3px solid; border-bottom: #f3363b 3px solid; border-left: #f3363b 3px solid; border-right: #f3363b 3px solid; } .spt{ font-size: 20px; padding-top: 35px; } <div class="circle1"><p class="spt">10 мес.</p></div>

But my version paints only the top.

enter image description here

  • See this question: www.stackoverflow.com/questions/628297/… . In fact, you need to put one border on another and increase the top one. - Sasha Omelchenko
  • You can rotate another 45 degrees. but of course nothing will increase. - teran

1 answer 1

Solved your problem:

 .circle1{ position: relative; color: #f3363b; font-weight: bold; border-radius: 75px; height: 100px; width: 100px; border:hsla(0,0%,0%,0) 3px solid; } ._border{ border-radius: 75px; height: 100px; width: 100px; border-top: #3687f3 3px solid; border-bottom: #f3363b 3px solid; border-left: #f3363b 3px solid; border-right: #f3363b 3px solid; position: absolute; transform:rotate(-27deg); } .spt{ position:fixed; font-size: 30px; text-align:center; padding:0 24px; transform:rotate(27deg); } 
 <div class="circle1"> <span class="_border"><p class="spt">42ч</p></span> </div>