Making harvey ball with border style css - html

Question

I am trying to make a css styling for a harvey ball with an image inside, but so far I haven't figure out a way to do it right. This is what I have now:
.three {width: 43px;
border-radius: 100%;
border-style: solid;
border-width: 4px;
border-left-color: #dadad9;
border-top-color: #009ee3;
border-right-color: #009ee3;
border-bottom-color: #009ee3;
width:40px;
height:40px;
}
.lead-name {
font-size: 16px;
font-family:Symantec Sans;
color:#424242;
font-weight: 600;
margin-bottom:0px;
}
.lead-title {
font-size: 14px;
font-family:Symantec Sans;
color:#424242;
margin-top: -3px;
margin-bottom: 10px;
}
<div class="lead-designer">
<img class="three" src="http://orig09.deviantart.net/09e7/f/2008/159/0/1/side_profile_vector_by_sruphil.png"/>
<div style="display:inline-block; margin-bottom:0px; margin-top:5px;">
<p class="lead-name">Designer Name</p>
<p class="lead-title">Messaging PO</p>
</div>
</div>
https://jsfiddle.net/yiluka/dtauydrz/
What I want is something like
As you can see, I want the circle to be divided straight and have part of the image grey scaled.
I have a lot of them and I really want to do it in code instead of photoshop to save some labor.

Answer 1

You can also do it using the pseudo element ::after - https://jsfiddle.net/dtauydrz/3/
The HTML:
<div class="image-container">
<img class="three" src="http://orig09.deviantart.net/09e7/f/2008/159/0/1/side_profile_vector_by_sruphil.png"/>
</div>
<div style="display:inline-block; margin-bottom:0px; margin-top:5px;">
<p class="lead-name">Designer Name</p>
<p class="lead-title">Messaging PO</p>
</div>
The CSS:
.three {
border-radius: 100%;
border-left-color: #dadad9;
border-top-color: #009ee3;
border-right-color: #009ee3;
border-bottom-color: #009ee3;
width:40px;
height:40px;
border-style: solid;
border-width: 4px;
border-color: #dadad9;
}
.image-container::after{
content: "";
display:block;
position: absolute;
margin-top: -52px;
background-color: #009ee3;
-moz-border-radius: 25px 0 0 0;
border-radius: 25px 0 0 0;
width: 25px;
height: 25px;
opacity: 0.5;
}

Answer 2

After an hour of messing with it, I finally finished my solution.
TL;DR
JSFiddle Demo
JSFiddle Demo with a kitten(pick this one)
JSFiddle Demo with the unhappy king of all kittens(Actually this one is amazing)
This solution, after being implemented, renders this(minus, of course, the amazing hand-drawn circle):
This solution doesn't require square images, playing with the background-image placement, and is quite easy to implement.
Let's get started!
First of all, we take your nice <img> HTML element, and replace it with this monstrosity of HTML(It really isn't that bad):
<div class="image-wrapper">
<img class="main" src="http://orig09.deviantart.net/09e7/f/2008/159/0/1/side_profile_vector_by_sruphil.png">
<div class="grayscale">
<img class="gray" src="http://orig09.deviantart.net/09e7/f/2008/159/0/1/side_profile_vector_by_sruphil.png">
</div>
</div>
Now for a little explanation. We use two different image elements so we can gray-scale one of them. We do not use a background image, since this requires a massive amount of changes if you want to make the icon bigger, or the images are different sizes.
.image-wrapper is the container div, the elements inside are positioned relative to it. It's CSS is stupid simple:
.image-wrapper {
position: relative;
}
(If you can't understand that CSS, go read HTML5 and CSS3 for dummies. That's how I started with css... #destroying_my_reputation)
.main is, of course, the main image in color. It's CSS is a little mor complicated, but still very basic:
.main {
width: 100px;
border-radius: 100%;
border: 5px solid #dadad9;
}
The width can be changed to whatever you want, if you do change the width, make sure you also change the width of the .gray image. border-radius:100% makes a circle, and border obviously adds a border.
Now on to the more complicated CSS(It's all pretty simple)!
.grayscale is the div used to hold the gray-scale image. If you know CSS, you can probably tell what is happening.
.grayscale {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
height: 50px;
width: 50px;
border-radius: 100% 0 0 0;
background: #009ee3;
padding-top: 5px;
padding-left: 5px;
}
The div is positioned absolute at the top-left corner of .image-wrapper. Anything overflowing it is hidden. It's top-left corner is given a border-radius of 100%, making it into the quarter-circle shape. Instead of a border, we change it's background color, and add a padding. This is because if we use a border, it is added to all sides, messing up the desired shape.
And then the .gray img:
.gray {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
width: 100px;
border-radius: 50% 0 0 0;
}
Simple, the image is changed to gray-scale using the grayscale() CSS filter. Make sure the width is the same as .main. And a border radius to add the round effect.
That's a wrap!
And here is the long awaited demo, with all the code

Answer 3

I just created a div that has the shape of a quarter circle
.quarter-circle-top-left {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
background: rgba(0, 0, 0, 0.4);
border-radius: 100px 0 0 0;
-moz-border-radius: 100px 0 0 0;
-webkit-border-radius: 100px 0 0 0;
border-left: 4px solid #009ee3;
border-top: 4px solid #009ee3;
}
And absolutely positioned that div on top of your image. It's got a transparent gray background and a top and left border with your blue. Both are now contained within an wrapper div so that the quarter circle would have something to be relative to.
Here's where the quarter circle css came from: http://1stwebmagazine.com/css-quarter-circle (I changed the class names because they seemed backwards to me).
And here's the updated fiddle: https://jsfiddle.net/ingridly/dtauydrz/1/
UPDATE:
I incorporated the idea from the other answers of filling another element with the image and grayscale-ing that, and now I think this answer does everything:
https://jsfiddle.net/ingridly/dtauydrz/6/