Можно ли сделать такой круг средствами css?
Я имею ввиду такую границу с зазубринами.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуэто мой самый идиотский ответ)))))))))) Просто хотелось попробовать. Cкрит только для того, что бы не сидеть и не прописывать каждому элементу трансфомацию. Кому не лень пусть в чистый css переделает...
var blocks = document.getElementsByClassName('blocks');
for (var i = 0; i < blocks.length; i++) {
blocks[i].style.transform = 'rotate(' + [i * 10] + 'deg)';
}
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background: #272727;
}
#wrapper {
position: relative;
width: 300px;
height: 300px;
left: 50px;
top: 50px;
background: transparent;
}
.block {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
border-radius: 50%;
}
.blocks {
width: 240px;
height: 240px;
background: orange;
display: block;
position: absolute;
left: 30px;
top: 30px;
}
<div id="wrapper">
<div class="block">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
</div>