<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0; padding: 0} div{width: 120px; height: 0px; border-radius: 50%; border-top: 60px solid red; border-bottom: 60px solid green; position: absolute;} .div1:before{content: ""; width: 20px; height: 20px; border-radius: 50%; background-color: red; border:20px solid green; position: absolute; margin-top: -30px} .div1:after{content: ""; width: 20px; height: 20px; border-radius: 50%; background-color: green; border:20px solid red; position: absolute; margin-top: -30px; margin-left:60px;} </style> </head> <body> <div class="div1"> </div> </body> </html>
