html {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: radial-gradient(#596075, #252439);
}
html::before {
  content: "";
  position: absolute;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 22px double;
  border-radius: 100%;
  border-color: #fff #fff transparent transparent;
  transform: rotate(45deg);
  z-index: 1;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100px;
  width: 100px;
  border-radius: 100%;
}
body::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to top, #3c145a, #872dc8);
  border-radius: inherit;
}
body::after {
  content: "";
  position: absolute;
  border: 13px solid;
  border-radius: inherit;
  border-color: #fff #fff transparent transparent;
  transform: rotate(45deg);
}