как сделать такую штуку ) CSS

Question

скрин прикреплю. Подскажите как сделать такие границы чтобы в начало было ярко а в конце было не видно )

Answer 1

Картинкой..
Но если хотите извращений:

.border {
  display: block;
  width: 250px;
  height: 250px;
  position: relative;
  -webkit-mask-image: linear-gradient(#000, transparent);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 75%;
  mask-image: linear-gradient(#000, transparent);
  mask-repeat: no-repeat;
  mask-size: 100% 75%;
}

.border::before,
.border::after {
  content: '';
  display: block;
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.border::before {
  width: 80%;
  height: 80%;
}

.border::after {
  width: 60%;
  height: 60%;
}

.border,
.border::before,
.border::after {
  border: 1px solid red;
  border-radius: 50%;
  box-sizing: border-box;
}

<div class="border"></div>

БЛОГ НА HUSL

как сделать такую штуку ) CSS

Ответы (1 шт):