Egg shape with CSS

Egg shape created with a DIV tag and a few CSS properties (without image file).
Code:

<style type="text/css">
/* http://css-tricks.com/examples/ShapesOfCSS/ */
#egg {
 display:block;
 width: 180px;
 height: 240px;
 background-color: #09fb09;
 -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
 border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

/* Content in egg */
#eggsp div {
 position:absolute;
 padding:89px 2px 2px 9px;
}
</style>

<div id="egg"><div>CSS Course<br/>https://CoursesWeb.net</div></div></div>

Demo:

CSS Course
https://CoursesWeb.net

<<-Clepsydra shape with CSS -- Yin-Yang with CSS->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag renders as emphasized text, displaying the text oblique?

<p>Web development courses: <em>CoursesWeb.net</em></p>

Which CSS property defines the space between the element border and its content?

margin padding position

h3 {
  padding: 2px 0.2em;
}

Click on the method which returns the first element that matches a specified group of selectors.

getElementsByName() querySelector() querySelectorAll()

// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);

Indicate the PHP variable that contains data from a form sent with method="post".

$_SESSION $_GET $_POST

if(isset($_POST["field"])) {
  echo $_POST["field"];
}

Last accessed pages

Making DIV Contents Scroll Horizontally, with multiple Div`s inside ^(59486)
PHP PDO - prepare and execute ⁽⁹¹²⁵⁾
Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ^(137540)
PHP Error Handling and Debugging ⁽⁴⁴²⁹⁾
Triangles with CSS ⁽⁴²⁷⁰⁾

Popular pages this month

Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ⁽²²⁹⁾
Read Excel file data in PHP - PhpExcelReader ⁽⁸²⁾
PHP Unzipper - Extract Zip, Rar Archives ⁽⁷²⁾
The Four Agreements ⁽⁶⁹⁾
The Mastery of Love ⁽⁵⁹⁾