Question 290410 in CSS Question posted in
Some basic documentation can be found here.

Css – border visible on quater circle

I want to achive effect of round black-white picture and green line:
enter image description here

I know how to make picture round and black-white, but I don’t know how to make this green border.

Here is my code:

.comitee-image {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: grayscale(100%);
  object-fit: cover;
}

Could somebody help me please?

Tags:

2

Answers


  1. 0

    So if you want only green border at bottom right then:

    • You can wrap your image inside a picture element and then use ::before in CSS.
    • Then create a border with radius 50% and transparent color.
    • Then override the border-right color with green color.
    • And rotate the element by 45 degrees to get the desired effect.
    img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: grayscale(100%);
  object-fit: cover;
}
picture::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 300px;
  height: 300px;
  border: 10px solid transparent;
  border-radius: 50%;
  border-right: 10px solid green;
  transform: rotate(45deg);
}
    <picture>
<img src="https://media.istockphoto.com/id/491520707/photo/sample-red-grunge-round-stamp-on-white-background.jpg?s=612x612&w=0&k=20&c=FW80kR5ilPkiJtXZEauGTghNBOgQviVPxAbhLWwnKZk=" />
</picture>
    Login or Signup to reply.
  2. 0

    You can see here how to make it.

    You have a div container relative, with your image inside of it.
    Then you can use ::before pseudo element to add an absolute element slightly bigger than the parent, centered and with a border.

    The transparent border can be bigger so the green one gonna shrink, BUT the green one can be distorted.

    body {
     background: black;
     padding: 20px;
}
 .avatar {
     width: 300px;
     height: 300px;
     border-radius: 50%;
     box-sizing: border-box;
     position: relative;
}
 .avatar__image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: grayscale(100%);
     border-radius: 50%;
}
 .avatar::before {
     content: "";
   /* try to change size and color of this border to understand how it works */
     border: 5px solid transparent; 
     border-radius: 50%;
     border-right: 5px solid green;
     display: block;
     transform: translate(-50%, -50%) rotate(50deg);
     top: 50%;
     left: 50%;
     width: calc(100% + 15px);
     height: calc(100% + 15px);
     position: absolute;
}
 
    <div class="avatar">
    <img src="https://img.freepik.com/photos-gratuite/portrait-beaute-du-visage-feminin_93675-132045.jpg" class="avatar__image">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search