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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.