I ♥ U

👁

🐑

HTML

CSS

<div class="outer black"> <div class="inner eye">👁</div> </div> <div class="outer pink"> <div class="inner circle upper left red"> </div> <div class="inner circle upper right red"> </div> <div class="inner circle center red"> </div> <div class="inner lower triangle red"> </div> </div> <div class="outer green"> <div class="inner ewe">🐑</div> </div>

<style> div.outer { height: 1.6in; width: 1.6in; margin: 0.25in; display: inline-block; position: relative; } div.inner { position: absolute; } div.upper { top: 0; } div.lower { bottom: 0; } div.left { left: 0; } div.circle.center { left:0.4in; top: 0.4in; } div.right { right: 0; } div.circle { height: 0.8in; width: 0.8in; border-radius: 50%; } div.triangle { left: 0.117in; height: 0.917in; width: 1.366in; clip-path: polygon(0 0, 100% 0, 50% 100%); } div.black { background-color: black; } div.red { background-color: red; } div.green { background-color: green; } div.pink { background-color: pink; } div.ewe { top: -0.1in; left: 0.1in; font-size: 10em; } div.eye { top: -0.2in; left: 0.1in; color: white; font-size: 10em; } </style>