I don't even know how to describe it really, so here's the picture.
Yeah, something like that. I mean the round border, but like only a part of it is red. Also, I don't want it to be animated or anything, so is it possible to make it only with CSS and HTML, with no JavaScript?
Would love to get some help here!
-
1This answer seems to cover what you're after stackoverflow.com/questions/14222138/css-progress-circle – dav0r Mar 3 '19 at 3:02
Add a comment
|
I think this can help you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background:yellow;
}
.image{
height:100px;
width:100px;
margin:auto;
border-radius:50%;
border:10px solid red;
border-left:10px solid transparent;
padding:15px;
transform:rotate(45deg);
}
img{
width:100%;
height:100%;
border-radius:50%;
transform:rotate(-45deg);
}
</style>
</head>
<body>
<div class="image" >
<img src="img.jpg" />
</div>
</body>
</html>