CSS Motif image frontière

Question

(This is What I did)

(This is What I want)

Comment puis-je faire la ronde à motifs frontière image autour du cercle rouge sur l'image d'une manière valable à la norme?

Besoin d'une bonne suggestion.

Cordialement

Answer 1

J'ai utilisé cette LINK pour modèle. Créez un motif que vous aimez. Si vous avez des questions, s'il vous plaît commenter.

.circle { 
 
    position: relative; 
 
    background: repeating-linear-gradient(to right, #f6ba52, #f6ba52 10px, #ffd180 10px, #ffd180 20px); 
 
    -webkit-border-radius: 50px; 
 
    -moz-border-radius: 50px; 
 
    border-radius: 50%; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.circle:after { 
 
    position: absolute; 
 
    display: block; 
 
    top: 5px; 
 
    left: 5px; 
 
    width: 90px; 
 
    height: 90px; 
 
    content: ""; 
 
    background-color: #fff; 
 
    border-radius: 50%; 
 
}

<div class="circle"></div>