Thread: half star
View Single Post
Old 09-28-2016, 09:29 AM   #7
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,117
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Neat - Thanks Doitsu!

I fiddled with your code and got it to show the left half of the star black with the right half missing if anyone is interested. (edit) I also changed the color from white to transparent so it'll work on any background color.

Spoiler:

Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.content {
    position: relative;
    font-size: 50px;
    color: transparent;
}

.content:after {
    position: absolute;
    overflow: hidden;
    content: "★";
    color: black;
    top: 0;
    left: 0;
    width: .50em;
}
</style>


</head>
<body>
<div>Half star with pseudo elements: <span class="content">★</span></div>

<div style="background-color:blue">Half star with pseudo elements: <span class="content">★</span></div>
</body>
</html>


(edit-edit) You can change how much of the star is visible by changing the "width" (.25em for 1/4 star, .75em for 3/4 star)
Attached Thumbnails
Click image for larger version Name: Capture.JPG Views: 437 Size: 16.2 KB ID: 151989  
Last edited by Turtle91; 09-28-2016 at 09:53 AM.
Turtle91 is offline   Reply With Quote