I have this ellips that I have to draw in css, but I can't make sense of it anyone has an idea how can I do it ? knowing that I have to make it responsive
I tries to make it first as an svg but it was too big , then I tried to look for a way to draw it using css but can't put my hand on the right track
Using border-radius:
<div class="ellipse"></div>
.ellipse {
width: 200px; /* Adjust width as needed */
height: 100px; /* Adjust height as needed */
background-color: #ccc;
border-radius: 50% 100%; /* Horizontal radius, Vertical radius */
}
Using the shape-outside property :
<div class="ellipse"></div>
.ellipse {
width: 200px; /* Adjust width as needed */
height: 100px; /* Adjust height as needed */
background-color: #ccc;
shape-outside: ellipse(200px 100px); /* Horizontal radius, Vertical radius */
}
Based on Vladimir Petukhov's comment, here it is:
<style>
.ellipse {
width: 80%;
/* Adjust the width as needed */
height: 100vw;
/* Adjust the height relative to width for responsiveness */
background-color: #212D49;
/* Background color of the ellipse*/
border-radius: 50%/50%;
/* 50% for horizontal radius, 50% for vertical radius */
margin: 20px auto;
/* Center the ellipse horizontally and add some margin */
}
</style>
<div class="ellipse"></div>With your SVG, simplified:
<svg viewBox="0 0 869 1024" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="434.5" cy="512" rx="434.5" ry="512" fill="#212D49" />
</svg>Notice that the cx and the rx must be the half of the viewbox's width, and the cy and the ry the half of the viewbox's height!
code <svg width="869" height="1024" viewBox="0 0 869 1024" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M308.5 727C107.833 777.903 985.339 1083 855 1083C724.661 1083 -21 1154.58 -21 1027C-21 899.422 -190.675 -21.5237 39 -67.5001C1148 -289.5 683 632 308.5 727Z" fill="#212D49"/> </svg>
ellipse()