css Question posted in
Some basic documentation can be found here.

trying to draw an ellipse using css

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

Tags:

2

Answers


  1. 0

    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!

    Login or Signup to reply.
  2. 0

    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 */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search