JSFiddle - React, Tailwind, and code Playground

by ainop

HTML

<div class="test">
    <svg viewBox="0 0 100 100" width="100" height="100">
      <rect x="0" y="0" width="100" height="100" fill="black"/>
      <rect x="0" y="50" width="100" height="50" fill="aliceblue"/>
    </svg>
</div>

<div class="test">
  <div style="height: 100%; background: black"></div>
  <div style="height: 50%; margin-top: -50%; background: aliceblue"></div>
</div>

<div class="test" style="background: black">
  <div style="height: 50%; margin-top: 50%; background: aliceblue"></div>
</div>

CSS

.test {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}
    .test,
    .test > * {
        backface-visibility: hidden;
    }

body {
  background: white;
}