<!DOCTYPE html>
<html lang="ru">
<head>
<title>Круглая стрелка с помощью рамки, часть 2</title>
<meta charset="utf-8">
</head>
<body class="geometry">
<div class="arrow-round"></div>
</body>
</html>
body {
background-color: lightyellow;
}
.arrow-round {
position: relative;
width: 100px;
height: 100px;
margin: 100px auto;
border: 25px solid #0074d9;
border-radius: 50%;
border-right-color: transparent;
}
.arrow-round::after {
content: "";
position: absolute;
border: 50px solid #ffffff;
top: -20px;
left: 69px;
border-bottom-color: #0074d9;
border-top-width: 0;
border-right-width: 0;
border-left-color: transparent;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.