Как закрасить часть бордера под углом 90 градусов

Question

Нужно сделать на сайте такой блок:

И по-хорошему нужно чтобы синий бордер увеличивался по мере уменьшения времени, но это позже, сейчас вопрос: как это сделать? Я написал так:

.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>

Но мой вариант красит только верх.

Посмотрите этот вопрос: http://ru.stackoverflow.com/questions/628297/%D0%9A%D1%80%D1%83%D0%B3%D0%BE%D0%B2%D0%BE%D0%B9-%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D0%BD%D1%82%D0%BD%D1%8B%D0%B9-%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B5%D1%81%D1%81-%D0%B1%D0%B0%D1%80. Фактически, вам надо наложить один бордер на другой и увеличивать верхний. — Sasha Omelchenko, Feb 21 '17 at 20:48
повернуть можно еще на 45 градусов. но увеличиваться так конечно ничего не будет. — teran, Feb 21 '17 at 21:18

score 0 · Answer 1 · edited Feb 21 '17 at 22:06

Решил вашу проблему:

.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>

Как закрасить часть бордера под углом 90 градусов

1 Answers1