How can I make a border-radius element a different color with css?

Question

I'm trying to get the following image using border, but I couldn't change the color of the places I want. I looked at the use of Rotate, but it plays in the photo inside the circle.How can I generate a color plant with css?

The code below doesn't do what I want.

.

profile-img {
            width: 70px;
            height: 70px;
            border-bottom: 4px #272121 solid;
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%;
            border-top: 4px #272121 solid;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
        }

score 2 · Answer 1 · answered Oct 12 '22 at 12:01

maybe not quite accurately calculated the positions of the colors, but the principle should be clear.

body {
  padding: 0;
  display: flex;
  min-height: 100vh;
}

div {
  margin: auto;
  background-color: #ddd;
  width: 130px;
  height: 130px;
  position: relative;
  border-radius: 100%;
}

div::after {
  content: '';
  width: 150px;
  height: 150px;
  display: block;
  z-index: -10;
  position: absolute;
  left: -10px;
  top: -10px;
  border-radius: 100%;
  background-image: conic-gradient(#F8D41A, #F8D41A 35%, #FFFFE8 50%, #F8D41A 65%, #F8D41A 80%, #FFFFE8 90%, #F8D41A 100%)
}

<div></div>

How can I make a border-radius element a different color with css?

1 Answers1