HTML-Sonderzeichen, halbe Sterne?

[Dsimon24]

Hallo zusammen,

mit den Codes ★ (gefüllter Stern) & ☆ (n. gefüllter Stern)
kann ich die entsprechenden Sonderzeichen einbinden. Gibt es auch
eine Möglichkeit, halbe (od. zur Hälfte gefüllte) Sterne darzustellen?

VG, David

 

[benneq]

Normalerweise benutzt man dafür eine Icon Bibliothek. Wie z.B. von diversen Material UI Frameworks bereitgestellt. Oder z.B. Font Awesome.

Mit reinem HTML und CSS ist das natürlich auch möglich. Entweder als SVG oooooder du benutzt deine Codes für die Sterne und packst sie in ein <span> und sorgst dann mit CSS dafür, dass man nur noch das halbe Zeichen sieht. Ziemlich umständlich und wahrscheinlich wird es auf jedem Browser anders aussehen, weil leicht unterschiedliche Schriftarten benutzt werden.

 

[new Account()]

Oder man nutzt Unicode MIT einer Schriftart, die das Symbol unterstützt

 

[umask007]

<svg>
   <defs>
    <clipPath id="cutOffHalf" clipPathUnits="objectBoundingBox">
      <rect x="0" y="0" width=".5" height="1" />
    </clipPath>
  </defs>
  <text clip-path="url(#cutOffHalf)" alignment-baseline="hanging" >&#9733</text>
  <text alignment-baseline="hanging">&#9734</text>
</svg>

https://jsfiddle.net/90he4Lmv/