Half Star and Body Transparent Star
0
I need to create rating stars in css, I have two requirements so far,
- Half colored star.
- Star with border but Body transparent.
So far I was able to create a fully colored stars using CSS. But with this structure I am unable to achieve the above requirements.
This is what I have now, I followed this ANSWER for my reference
.star {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin-left: .9em;
margin-right: .9em;
margin-bottom: 1.2em;
border-right: .3em solid transparent;
border-bottom: .7em solid #FC0;
border-left: .3em solid transparent;
/* Controlls the size of the stars. */
font-size: 24px;
}
.star:before,
.star:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: .6em;
left: -1em;
border-right: 1em solid transparent;
border-bottom: .7em solid #FC0;
border-left: 1em solid transparent;
transform: rotate(-35deg);
}
.star:after {
transform: rotate(35deg);
}<p>
<i class="star"></i>
<i class="star half"></i>
<i class="star transparent"></i>
</p>html css svg css-shapes
asked Nov 23 '18 at 7:15
Ramesh
1,251319
add a comment |
0
I need to create rating stars in css, I have two requirements so far,
- Half colored star.
- Star with border but Body transparent.
So far I was able to create a fully colored stars using CSS. But with this structure I am unable to achieve the above requirements.
This is what I have now, I followed this ANSWER for my reference
.star {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin-left: .9em;
margin-right: .9em;
margin-bottom: 1.2em;
border-right: .3em solid transparent;
border-bottom: .7em solid #FC0;
border-left: .3em solid transparent;
/* Controlls the size of the stars. */
font-size: 24px;
}
.star:before,
.star:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: .6em;
left: -1em;
border-right: 1em solid transparent;
border-bottom: .7em solid #FC0;
border-left: 1em solid transparent;
transform: rotate(-35deg);
}
.star:after {
transform: rotate(35deg);
}<p>
<i class="star"></i>
<i class="star half"></i>
<i class="star transparent"></i>
</p>html css svg css-shapes
asked Nov 23 '18 at 7:15
Ramesh
1,251319
So you're saying that all you've got is 100% copied from the linked SO question. You haven't added/changed anything by yourself. And now you want us to make it work for your requirements. Is that correct?
– connexo
Nov 23 '18 at 7:52
@connexo You can compare the code sir. I followed the pattern. As well as I researched on my requirement and I couldn't find any answers. I found some that they are using unicodes and svg. But actually I want to do this in css. Since I couldn't find any answers in internet, I posted this question. If you really feel this is an useless question, you have enough power to close this question. Thank You.
– Ramesh
Nov 23 '18 at 8:01
You might be able to get a half star using this by applying some clipping or something like that; but to get only a border in a star shape, this technique is really not suitable IMHO.
– misorude
Nov 23 '18 at 9:08
@misorude Thank you for your reply sir. Will it be able to do this with pure css or do I need support of svg or something else?
– Ramesh
Nov 23 '18 at 10:43
add a comment |
0
0
0
I need to create rating stars in css, I have two requirements so far,
- Half colored star.
- Star with border but Body transparent.
So far I was able to create a fully colored stars using CSS. But with this structure I am unable to achieve the above requirements.
This is what I have now, I followed this ANSWER for my reference
.star {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin-left: .9em;
margin-right: .9em;
margin-bottom: 1.2em;
border-right: .3em solid transparent;
border-bottom: .7em solid #FC0;
border-left: .3em solid transparent;
/* Controlls the size of the stars. */
font-size: 24px;
}
.star:before,
.star:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: .6em;
left: -1em;
border-right: 1em solid transparent;
border-bottom: .7em solid #FC0;
border-left: 1em solid transparent;
transform: rotate(-35deg);
}
.star:after {
transform: rotate(35deg);
}<p>
<i class="star"></i>
<i class="star half"></i>
<i class="star transparent"></i>
</p>html css svg css-shapes
asked Nov 23 '18 at 7:15
Ramesh
1,251319
I need to create rating stars in css, I have two requirements so far,
- Half colored star.
- Star with border but Body transparent.
So far I was able to create a fully colored stars using CSS. But with this structure I am unable to achieve the above requirements.
This is what I have now, I followed this ANSWER for my reference
.star {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin-left: .9em;
margin-right: .9em;
margin-bottom: 1.2em;
border-right: .3em solid transparent;
border-bottom: .7em solid #FC0;
border-left: .3em solid transparent;
/* Controlls the size of the stars. */
font-size: 24px;
}
.star:before,
.star:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: .6em;
left: -1em;
border-right: 1em solid transparent;
border-bottom: .7em solid #FC0;
border-left: 1em solid transparent;
transform: rotate(-35deg);
}
.star:after {
transform: rotate(35deg);
}<p>
<i class="star"></i>
<i class="star half"></i>
<i class="star transparent"></i>
</p>.star {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin-left: .9em;
margin-right: .9em;
margin-bottom: 1.2em;
border-right: .3em solid transparent;
border-bottom: .7em solid #FC0;
border-left: .3em solid transparent;
/* Controlls the size of the stars. */
font-size: 24px;
}
.star:before,
.star:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: .6em;
left: -1em;
border-right: 1em solid transparent;
border-bottom: .7em solid #FC0;
border-left: 1em solid transparent;
transform: rotate(-35deg);
}
.star:after {
transform: rotate(35deg);
}<p>
<i class="star"></i>
<i class="star half"></i>
<i class="star transparent"></i>
</p>.star {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin-left: .9em;
margin-right: .9em;
margin-bottom: 1.2em;
border-right: .3em solid transparent;
border-bottom: .7em solid #FC0;
border-left: .3em solid transparent;
/* Controlls the size of the stars. */
font-size: 24px;
}
.star:before,
.star:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: .6em;
left: -1em;
border-right: 1em solid transparent;
border-bottom: .7em solid #FC0;
border-left: 1em solid transparent;
transform: rotate(-35deg);
}
.star:after {
transform: rotate(35deg);
}<p>
<i class="star"></i>
<i class="star half"></i>
<i class="star transparent"></i>
</p>html css svg css-shapes
html css svg css-shapes
asked Nov 23 '18 at 7:15
Ramesh
1,251319
asked Nov 23 '18 at 7:15
Ramesh
1,251319
edited Nov 23 '18 at 10:47
asked Nov 23 '18 at 7:15
Ramesh
1,251319
asked Nov 23 '18 at 7:15
Ramesh
1,251319
asked Nov 23 '18 at 7:15
Ramesh
1,251319
1,251319
So you're saying that all you've got is 100% copied from the linked SO question. You haven't added/changed anything by yourself. And now you want us to make it work for your requirements. Is that correct?
– connexo
Nov 23 '18 at 7:52
@connexo You can compare the code sir. I followed the pattern. As well as I researched on my requirement and I couldn't find any answers. I found some that they are using unicodes and svg. But actually I want to do this in css. Since I couldn't find any answers in internet, I posted this question. If you really feel this is an useless question, you have enough power to close this question. Thank You.
– Ramesh
Nov 23 '18 at 8:01
You might be able to get a half star using this by applying some clipping or something like that; but to get only a border in a star shape, this technique is really not suitable IMHO.
– misorude
Nov 23 '18 at 9:08
@misorude Thank you for your reply sir. Will it be able to do this with pure css or do I need support of svg or something else?
– Ramesh
Nov 23 '18 at 10:43
add a comment |
So you're saying that all you've got is 100% copied from the linked SO question. You haven't added/changed anything by yourself. And now you want us to make it work for your requirements. Is that correct?
– connexo
Nov 23 '18 at 7:52
@connexo You can compare the code sir. I followed the pattern. As well as I researched on my requirement and I couldn't find any answers. I found some that they are using unicodes and svg. But actually I want to do this in css. Since I couldn't find any answers in internet, I posted this question. If you really feel this is an useless question, you have enough power to close this question. Thank You.
– Ramesh
Nov 23 '18 at 8:01
You might be able to get a half star using this by applying some clipping or something like that; but to get only a border in a star shape, this technique is really not suitable IMHO.
– misorude
Nov 23 '18 at 9:08
@misorude Thank you for your reply sir. Will it be able to do this with pure css or do I need support of svg or something else?
– Ramesh
Nov 23 '18 at 10:43
So you're saying that all you've got is 100% copied from the linked SO question. You haven't added/changed anything by yourself. And now you want us to make it work for your requirements. Is that correct?
– connexo
Nov 23 '18 at 7:52
So you're saying that all you've got is 100% copied from the linked SO question. You haven't added/changed anything by yourself. And now you want us to make it work for your requirements. Is that correct?
– connexo
Nov 23 '18 at 7:52
@connexo You can compare the code sir. I followed the pattern. As well as I researched on my requirement and I couldn't find any answers. I found some that they are using unicodes and svg. But actually I want to do this in css. Since I couldn't find any answers in internet, I posted this question. If you really feel this is an useless question, you have enough power to close this question. Thank You.
– Ramesh
Nov 23 '18 at 8:01
@connexo You can compare the code sir. I followed the pattern. As well as I researched on my requirement and I couldn't find any answers. I found some that they are using unicodes and svg. But actually I want to do this in css. Since I couldn't find any answers in internet, I posted this question. If you really feel this is an useless question, you have enough power to close this question. Thank You.
– Ramesh
Nov 23 '18 at 8:01
You might be able to get a half star using this by applying some clipping or something like that; but to get only a border in a star shape, this technique is really not suitable IMHO.
– misorude
Nov 23 '18 at 9:08
You might be able to get a half star using this by applying some clipping or something like that; but to get only a border in a star shape, this technique is really not suitable IMHO.
– misorude
Nov 23 '18 at 9:08
@misorude Thank you for your reply sir. Will it be able to do this with pure css or do I need support of svg or something else?
– Ramesh
Nov 23 '18 at 10:43
@misorude Thank you for your reply sir. Will it be able to do this with pure css or do I need support of svg or something else?
– Ramesh
Nov 23 '18 at 10:43
add a comment |
1 Answer
1
active
oldest
votes
2
With yours requirements I would use SVG. This is how I would do it:
.star{border:1px solid #d9d9d9; width:30px;}
.star{fill:gold; stroke:orange; stroke-width:5px;}
.star.full use:nth-child(2){display:none;}
.star.half use:nth-child(1),
.star.empty use:nth-child(2)
{display:none;}
.star.empty{fill:none;}<svg viewBox="0 0 95.1 90.45" style="width:0; height:0; display:none">
<defs>
<polygon id="half_star" points="47.6, 75 18.21, 90.45 23.82, 57.72 0.047, 34.55 32.9, 29.77 47.6, 0"></polygon>
<polygon id="star" points="47.6, 0 62.29, 29.77 95.15, 34.55 71.38, 57.73 76.99, 90.458 47.6, 75 18.21, 90.45 23.82, 57.73 0.05, 34.55 32.9, 29.77"></polygon>
</defs>
</svg>
<svg viewBox="0 0 95.1 90.45" class="star full">
<use xlink:href="#star" />
<use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star half">
<use xlink:href="#star" />
<use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star empty">
<use xlink:href="#star" />
<use xlink:href="#half_star" />answered Nov 23 '18 at 10:18
enxaneta
5,7912415
This is nice approach sir. Thank you for reply. Is it possible to do the same using css?
– Ramesh
Nov 23 '18 at 10:32
I think SVG is the best solution and it's practically as if it were HTML and CSS. You may try doing the same with cssclip-pathalthough the browser support is not that good. Also I think you may need to use shadows instead of the stroke. This is how you would do it with clip-path:div.half-star{ -webkit-clip-path: polygon(47.6% 75%, 18.21% 90.45%, 23.82% 57.72%, 0.047% 34.55%, 32.9% 29.77%, 47.6% 0%); }anddiv.star{ -webkit-clip-path: polygon(47.6% 0%, 62.29% 29.77%, 95.15% 34.55%, 71.38% 57.73%, 76.99% 90.458%, 47.6% 75%, 18.21% 90.45%, 23.82% 57.73%, 0.05% 34.55%, 32.9% 29.77%); }
– enxaneta
Nov 23 '18 at 10:41
2
Okie sir, this is working fine. Thank you for your time and valuable answer
– Ramesh
Nov 23 '18 at 10:46
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53442146%2fhalf-star-and-body-transparent-star%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
With yours requirements I would use SVG. This is how I would do it:
.star{border:1px solid #d9d9d9; width:30px;}
.star{fill:gold; stroke:orange; stroke-width:5px;}
.star.full use:nth-child(2){display:none;}
.star.half use:nth-child(1),
.star.empty use:nth-child(2)
{display:none;}
.star.empty{fill:none;}<svg viewBox="0 0 95.1 90.45" style="width:0; height:0; display:none">
<defs>
<polygon id="half_star" points="47.6, 75 18.21, 90.45 23.82, 57.72 0.047, 34.55 32.9, 29.77 47.6, 0"></polygon>
<polygon id="star" points="47.6, 0 62.29, 29.77 95.15, 34.55 71.38, 57.73 76.99, 90.458 47.6, 75 18.21, 90.45 23.82, 57.73 0.05, 34.55 32.9, 29.77"></polygon>
</defs>
</svg>
<svg viewBox="0 0 95.1 90.45" class="star full">
<use xlink:href="#star" />
<use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star half">
<use xlink:href="#star" />
<use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star empty">
<use xlink:href="#star" />
<use xlink:href="#half_star" />answered Nov 23 '18 at 10:18
enxaneta
5,7912415
This is nice approach sir. Thank you for reply. Is it possible to do the same using css?
– Ramesh
Nov 23 '18 at 10:32
I think SVG is the best solution and it's practically as if it were HTML and CSS. You may try doing the same with cssclip-pathalthough the browser support is not that good. Also I think you may need to use shadows instead of the stroke. This is how you would do it with clip-path:div.half-star{ -webkit-clip-path: polygon(47.6% 75%, 18.21% 90.45%, 23.82% 57.72%, 0.047% 34.55%, 32.9% 29.77%, 47.6% 0%); }anddiv.star{ -webkit-clip-path: polygon(47.6% 0%, 62.29% 29.77%, 95.15% 34.55%, 71.38% 57.73%, 76.99% 90.458%, 47.6% 75%, 18.21% 90.45%, 23.82% 57.73%, 0.05% 34.55%, 32.9% 29.77%); }
– enxaneta
Nov 23 '18 at 10:41
2
Okie sir, this is working fine. Thank you for your time and valuable answer
– Ramesh
Nov 23 '18 at 10:46
add a comment |
2
With yours requirements I would use SVG. This is how I would do it:
.star{border:1px solid #d9d9d9; width:30px;}
.star{fill:gold; stroke:orange; stroke-width:5px;}
.star.full use:nth-child(2){display:none;}
.star.half use:nth-child(1),
.star.empty use:nth-child(2)
{display:none;}
.star.empty{fill:none;}<svg viewBox="0 0 95.1 90.45" style="width:0; height:0; display:none">
<defs>
<polygon id="half_star" points="47.6, 75 18.21, 90.45 23.82, 57.72 0.047, 34.55 32.9, 29.77 47.6, 0"></polygon>
<polygon id="star" points="47.6, 0 62.29, 29.77 95.15, 34.55 71.38, 57.73 76.99, 90.458 47.6, 75 18.21, 90.45 23.82, 57.73 0.05, 34.55 32.9, 29.77"></polygon>
</defs>
</svg>
<svg viewBox="0 0 95.1 90.45" class="star full">
<use xlink:href="#star" />
<use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star half">
<use xlink:href="#star" />
<use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star empty">
<use xlink:href="#star" />
<use xlink:href="#half_star" />answered Nov 23 '18 at 10:18
enxaneta
5,7912415
This is nice approach sir. Thank you for reply. Is it possible to do the same using css?
– Ramesh
Nov 23 '18 at 10:32
I think SVG is the best solution and it's practically as if it were HTML and CSS. You may try doing the same with cssclip-pathalthough the browser support is not that good. Also I think you may need to use shadows instead of the stroke. This is how you would do it with clip-path:div.half-star{ -webkit-clip-path: polygon(47.6% 75%, 18.21% 90.45%, 23.82% 57.72%, 0.047% 34.55%, 32.9% 29.77%, 47.6% 0%); }anddiv.star{ -webkit-clip-path: polygon(47.6% 0%, 62.29% 29.77%, 95.15% 34.55%, 71.38% 57.73%, 76.99% 90.458%, 47.6% 75%, 18.21% 90.45%, 23.82% 57.73%, 0.05% 34.55%, 32.9% 29.77%); }
– enxaneta
Nov 23 '18 at 10:41
2
Okie sir, this is working fine. Thank you for your time and valuable answer
– Ramesh
Nov 23 '18 at 10:46
add a comment |
2
2
2
With yours requirements I would use SVG. This is how I would do it:
.star{border:1px solid #d9d9d9; width:30px;}
.star{fill:gold; stroke:orange; stroke-width:5px;}
.star.full use:nth-child(2){display:none;}
.star.half use:nth-child(1),
.star.empty use:nth-child(2)
{display:none;}
.star.empty{fill:none;}<svg viewBox="0 0 95.1 90.45" style="width:0; height:0; display:none">
<defs>
<polygon id="half_star" points="47.6, 75 18.21, 90.45 23.82, 57.72 0.047, 34.55 32.9, 29.77 47.6, 0"></polygon>
<polygon id="star" points="47.6, 0 62.29, 29.77 95.15, 34.55 71.38, 57.73 76.99, 90.458 47.6, 75 18.21, 90.45 23.82, 57.73 0.05, 34.55 32.9, 29.77"></polygon>
</defs>
</svg>
<svg viewBox="0 0 95.1 90.45" class="star full">
<use xlink:href="#star" />
<use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star half">
<use xlink:href="#star" />
<use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star empty">
<use xlink:href="#star" />
<use xlink:href="#half_star" />answered Nov 23 '18 at 10:18
enxaneta
5,7912415
With yours requirements I would use SVG. This is how I would do it:
.star{border:1px solid #d9d9d9; width:30px;}
.star{fill:gold; stroke:orange; stroke-width:5px;}
.star.full use:nth-child(2){display:none;}
.star.half use:nth-child(1),
.star.empty use:nth-child(2)
{display:none;}
.star.empty{fill:none;}<svg viewBox="0 0 95.1 90.45" style="width:0; height:0; display:none">
<defs>
<polygon id="half_star" points="47.6, 75 18.21, 90.45 23.82, 57.72 0.047, 34.55 32.9, 29.77 47.6, 0"></polygon>
<polygon id="star" points="47.6, 0 62.29, 29.77 95.15, 34.55 71.38, 57.73 76.99, 90.458 47.6, 75 18.21, 90.45 23.82, 57.73 0.05, 34.55 32.9, 29.77"></polygon>
</defs>
</svg>
<svg viewBox="0 0 95.1 90.45" class="star full">
<use xlink:href="#star" />
<use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star half">
<use xlink:href="#star" />
<use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star empty">
<use xlink:href="#star" />
<use xlink:href="#half_star" />.star{border:1px solid #d9d9d9; width:30px;}
.star{fill:gold; stroke:orange; stroke-width:5px;}
.star.full use:nth-child(2){display:none;}
.star.half use:nth-child(1),
.star.empty use:nth-child(2)
{display:none;}
.star.empty{fill:none;}<svg viewBox="0 0 95.1 90.45" style="width:0; height:0; display:none">
<defs>
<polygon id="half_star" points="47.6, 75 18.21, 90.45 23.82, 57.72 0.047, 34.55 32.9, 29.77 47.6, 0"></polygon>
<polygon id="star" points="47.6, 0 62.29, 29.77 95.15, 34.55 71.38, 57.73 76.99, 90.458 47.6, 75 18.21, 90.45 23.82, 57.73 0.05, 34.55 32.9, 29.77"></polygon>
</defs>
</svg>
<svg viewBox="0 0 95.1 90.45" class="star full">
<use xlink:href="#star" />
<use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star half">
<use xlink:href="#star" />
<use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star empty">
<use xlink:href="#star" />
<use xlink:href="#half_star" />.star{border:1px solid #d9d9d9; width:30px;}
.star{fill:gold; stroke:orange; stroke-width:5px;}
.star.full use:nth-child(2){display:none;}
.star.half use:nth-child(1),
.star.empty use:nth-child(2)
{display:none;}
.star.empty{fill:none;}<svg viewBox="0 0 95.1 90.45" style="width:0; height:0; display:none">
<defs>
<polygon id="half_star" points="47.6, 75 18.21, 90.45 23.82, 57.72 0.047, 34.55 32.9, 29.77 47.6, 0"></polygon>
<polygon id="star" points="47.6, 0 62.29, 29.77 95.15, 34.55 71.38, 57.73 76.99, 90.458 47.6, 75 18.21, 90.45 23.82, 57.73 0.05, 34.55 32.9, 29.77"></polygon>
</defs>
</svg>
<svg viewBox="0 0 95.1 90.45" class="star full">
<use xlink:href="#star" />
<use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star half">
<use xlink:href="#star" />
<use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star empty">
<use xlink:href="#star" />
<use xlink:href="#half_star" />answered Nov 23 '18 at 10:18
enxaneta
5,7912415
edited Nov 23 '18 at 10:23
answered Nov 23 '18 at 10:18
enxaneta
5,7912415
answered Nov 23 '18 at 10:18
enxaneta
5,7912415
answered Nov 23 '18 at 10:18
enxaneta
5,7912415
5,7912415
This is nice approach sir. Thank you for reply. Is it possible to do the same using css?
– Ramesh
Nov 23 '18 at 10:32
I think SVG is the best solution and it's practically as if it were HTML and CSS. You may try doing the same with cssclip-pathalthough the browser support is not that good. Also I think you may need to use shadows instead of the stroke. This is how you would do it with clip-path:div.half-star{ -webkit-clip-path: polygon(47.6% 75%, 18.21% 90.45%, 23.82% 57.72%, 0.047% 34.55%, 32.9% 29.77%, 47.6% 0%); }anddiv.star{ -webkit-clip-path: polygon(47.6% 0%, 62.29% 29.77%, 95.15% 34.55%, 71.38% 57.73%, 76.99% 90.458%, 47.6% 75%, 18.21% 90.45%, 23.82% 57.73%, 0.05% 34.55%, 32.9% 29.77%); }
– enxaneta
Nov 23 '18 at 10:41
2
Okie sir, this is working fine. Thank you for your time and valuable answer
– Ramesh
Nov 23 '18 at 10:46
add a comment |
This is nice approach sir. Thank you for reply. Is it possible to do the same using css?
– Ramesh
Nov 23 '18 at 10:32
I think SVG is the best solution and it's practically as if it were HTML and CSS. You may try doing the same with cssclip-pathalthough the browser support is not that good. Also I think you may need to use shadows instead of the stroke. This is how you would do it with clip-path:div.half-star{ -webkit-clip-path: polygon(47.6% 75%, 18.21% 90.45%, 23.82% 57.72%, 0.047% 34.55%, 32.9% 29.77%, 47.6% 0%); }anddiv.star{ -webkit-clip-path: polygon(47.6% 0%, 62.29% 29.77%, 95.15% 34.55%, 71.38% 57.73%, 76.99% 90.458%, 47.6% 75%, 18.21% 90.45%, 23.82% 57.73%, 0.05% 34.55%, 32.9% 29.77%); }
– enxaneta
Nov 23 '18 at 10:41
2
Okie sir, this is working fine. Thank you for your time and valuable answer
– Ramesh
Nov 23 '18 at 10:46
This is nice approach sir. Thank you for reply. Is it possible to do the same using css?
– Ramesh
Nov 23 '18 at 10:32
This is nice approach sir. Thank you for reply. Is it possible to do the same using css?
– Ramesh
Nov 23 '18 at 10:32
I think SVG is the best solution and it's practically as if it were HTML and CSS. You may try doing the same with css
clip-path although the browser support is not that good. Also I think you may need to use shadows instead of the stroke. This is how you would do it with clip-path: div.half-star{ -webkit-clip-path: polygon(47.6% 75%, 18.21% 90.45%, 23.82% 57.72%, 0.047% 34.55%, 32.9% 29.77%, 47.6% 0%); } and div.star{ -webkit-clip-path: polygon(47.6% 0%, 62.29% 29.77%, 95.15% 34.55%, 71.38% 57.73%, 76.99% 90.458%, 47.6% 75%, 18.21% 90.45%, 23.82% 57.73%, 0.05% 34.55%, 32.9% 29.77%); }– enxaneta
Nov 23 '18 at 10:41
I think SVG is the best solution and it's practically as if it were HTML and CSS. You may try doing the same with css
clip-path although the browser support is not that good. Also I think you may need to use shadows instead of the stroke. This is how you would do it with clip-path: div.half-star{ -webkit-clip-path: polygon(47.6% 75%, 18.21% 90.45%, 23.82% 57.72%, 0.047% 34.55%, 32.9% 29.77%, 47.6% 0%); } and div.star{ -webkit-clip-path: polygon(47.6% 0%, 62.29% 29.77%, 95.15% 34.55%, 71.38% 57.73%, 76.99% 90.458%, 47.6% 75%, 18.21% 90.45%, 23.82% 57.73%, 0.05% 34.55%, 32.9% 29.77%); }– enxaneta
Nov 23 '18 at 10:41
2
2
Okie sir, this is working fine. Thank you for your time and valuable answer
– Ramesh
Nov 23 '18 at 10:46
Okie sir, this is working fine. Thank you for your time and valuable answer
– Ramesh
Nov 23 '18 at 10:46
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53442146%2fhalf-star-and-body-transparent-star%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
So you're saying that all you've got is 100% copied from the linked SO question. You haven't added/changed anything by yourself. And now you want us to make it work for your requirements. Is that correct?
– connexo
Nov 23 '18 at 7:52
@connexo You can compare the code sir. I followed the pattern. As well as I researched on my requirement and I couldn't find any answers. I found some that they are using unicodes and svg. But actually I want to do this in css. Since I couldn't find any answers in internet, I posted this question. If you really feel this is an useless question, you have enough power to close this question. Thank You.
– Ramesh
Nov 23 '18 at 8:01
You might be able to get a half star using this by applying some clipping or something like that; but to get only a border in a star shape, this technique is really not suitable IMHO.
– misorude
Nov 23 '18 at 9:08
@misorude Thank you for your reply sir. Will it be able to do this with pure css or do I need support of svg or something else?
– Ramesh
Nov 23 '18 at 10:43