5
-
да, это возможно.– Grundy ♦11 ноя 2016 в 11:36
-
А как это сделать-то?– Frontender11 ноя 2016 в 11:46
-
stackoverflow.com/questions/29649643/…– tCode11 ноя 2016 в 11:51
-
Там SVG. На CSS этого сделать нельзя?– Frontender11 ноя 2016 в 11:53
-
2вот тут есть ответ с примером: stackoverflow.com/questions/13059190/…– mirkinoid11 ноя 2016 в 12:01
Добавить комментарий
|
2 ответа
Вот так будет универсальнее - можно длину обводки настраивать по желанию:
.pie {
display: inline-block;
margin: .5em;
width: 8em;
height: 8em;
position: relative;
border-radius: 50%;
}
.pie:after {
border-radius: 50%;
display: block;
content: "";
background: #fff;
position: absolute;
left: .5em;
top: .5em;
height: 7em;
width: 7em;
}
.p1 {
background-image: linear-gradient(-30deg, #ddd 50%, transparent 50%),
linear-gradient(90deg, #ddd 50%, steelblue 50%);
}
.p2 {
background-image: linear-gradient(90deg, #ddd 50%, steelblue 50%);
}
.p3 {
background-image: linear-gradient(150deg, transparent 50%, steelblue 50%),
linear-gradient(90deg, #ddd 50%, steelblue 50%);
}
.p4 {
background-image: linear-gradient(270deg, transparent 50%, steelblue 50%),
linear-gradient(180deg, #ddd 50%, steelblue 50%);
}
<div class="pie p1"></div>
<div class="pie p2"></div>
<div class="pie p3"></div>
<div class="pie p4"></div>
Вот так ?
* {
margin: 0;
}
div {
width: 300px;
height: 300px;
border: 10px solid red;
border-right: 10px solid transparent;
border-radius: 300px;
margin: 20px auto;
}
<div></div>
-
-
@Abmin не обязательно , можно любую часть квадрата убрать или как вы сказали повернуть– user3327411 ноя 2016 в 14:59
-
2
-
и так тоже, ваша правда– user3327411 ноя 2016 в 15:02