How to make a star in the oval?

16th Jul 2020, 6:27 PM

козиходжа

2 Answers

If you want this to show in a website, there are many ways. The following example uses a mixture of SVG, HTML, and CSS to show a dark blue star in a white oval/circle over a black background: <!DOCTYPE html> <html> <head> <title>Star in Circle</title> <style> html, body { padding: 0; margin: 0; background-color: #000; padding-top: 50px; } .circle { /* horizontally center the star */ margin-left: auto; margin-right: auto; background-color: #fff; /* Slightly larger than SVG's dimensions */ width: 280px; height: 280px; /* Roughly center the star over the circular background. */ text-align: center; padding-top: 15px; /* make a circular background by giving the background a huge border radius */ border-radius: 100%; } </style> </head> <body> <div class="circle"> <svg xmlns="http://www.w3.org/2000/svg" width="260" height="245"> <path d="m55,237 74-228 74,228L9,96h240" fill="#008" /> </svg> </div> </body> </html> Here are some other ways to show this star in an oval: - Draw it using HTML5's canvas element with JavaScript - Find an icon in an icon library and use that. The following font-based icon libraries are very popular but you'll have to check if they contain what you're after: - Font Awesome - Simple Line Icons - Include an image such as jpg or png of this shape. You could do this using an img or with CSS's background-image property. For something other than a website, usually you can still add an image of the shape.

18th Jul 2020, 3:21 PM

Josh Greig