使用css画个鸡蛋

.egg {
  width: 120px;
  height: 160px;
  background-color: #f7e7ce; /* Eggshell color */
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /* Egg shape */
  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  position: relative;
}

.yolk {
  width: 60px;
  height: 60px;
  background-color: #ffc107; /* Yolk color */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; /* Ensure yolk is on top */
}


/* Optional: Add a cracked egg style */

.cracked {
  background-image: url("crack.svg"); /* Replace with your crack image */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
}


/* Example usage in HTML: */
/* <div class="egg">
  <div class="yolk"></div>
</div>

<div class="egg cracked">
  <div class="yolk"></div>
</div> */

Explanation:

• .egg:

  • width and height: Define the egg's dimensions.
  • background-color: Sets the eggshell color. Adjust as desired.
  • border-radius: This is the key to creating the egg shape. The first four values control the roundness of each corner (top-left, top-right, bottom-right, bottom-left). The / separates these from the next four values, which control the vertical radius of the corners, allowing for the elliptical shape. Play with these values to fine-tune the egg's appearance.
  • box-shadow: Adds a subtle shadow for realism.
  • position: relative;: This is necessary for positioning the yolk absolutely within the egg.

• .yolk:

  • width and height: Define the yolk's dimensions.
  • background-color: Sets the yolk color.
  • border-radius: 50%;: Makes the yolk a perfect circle.
  • position: absolute;: Allows precise positioning within the egg.
  • top: 50%; left: 50%; transform: translate(-50%, -50%);: Centers the yolk perfectly within the egg. This is a common centering technique in CSS.
  • z-index: 1;: Ensures the yolk appears above the eggshell, especially important if you add a crack overlay.

• .cracked (Optional):

  • This class provides a way to style a cracked egg.
  • background-image: Uses a crack image (you'll need to provide this yourself). An SVG is recommended for scalability.
  • background-repeat, background-position, background-size: Control the placement and sizing of the crack image.

Key improvements over simpler solutions:

• More realistic shape: The use of / in border-radius allows for a more egg-like elliptical shape, rather than just a rounded rectangle.
• Yolk positioning: The yolk is positioned absolutely and centered correctly, ensuring it stays within the egg regardless of size adjustments.
• Cracked egg option: Provides a starting point for adding a cracked egg effect.
• Clearer explanations and comments: The code is well-commented to explain each part.

Remember to replace "crack.svg" with the actual path to your crack image file. You can find free SVG images of cracks online or create your own. This CSS provides a flexible and robust base for creating egg shapes in your web projects.