0
How to make a star in the oval?
How to make a star in the oval?
2 ответов
0
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.
0
Thank you my friend
Часто задают такие вопросы?
Учитесь эффективнее, бесплатно:
