• Star 6 points
  • Star 8 points
  • Star 12 points

Star shapes, 5, 6, 8 and 12 points, created with a DIV tag and CSS properties.

Star 5 points

Code:
<style type="text/css">
/* http://css-tricks.com/examples/ShapesOfCSS/ */
#star5 {
 margin: 50px 0;
 position: relative;
 display: block;
 width: 0px;
 height: 0px;
 border-right: 100px solid transparent;
 border-bottom: 70px solid #05ed08;
 border-left: 100px solid transparent;
 -moz-transform: rotate(35deg);
 -webkit-transform: rotate(35deg);
 -ms-transform: rotate(35deg);
 -o-transform: rotate(35deg);
}
#star5:before {
 border-bottom: 80px solid #05ed08;
 border-left: 30px solid transparent;
 border-right: 30px solid transparent;
 position: absolute;
 height: 0;
 width: 0;
 top: -45px;
 left: -65px;
 display: block;
 content:"";
 -webkit-transform: rotate(-35deg);
 -moz-transform: rotate(-35deg);
 -ms-transform: rotate(-35deg);
 -o-transform: rotate(-35deg);
}
#star5:after {
 position: absolute;
 display: block;
 top: 3px;
 left: -105px;
 width: 0px;
 height: 0px;
 border-right: 100px solid transparent;
 border-bottom: 70px solid #05ed08;
 border-left: 100px solid transparent;
 -webkit-transform: rotate(-70deg);
 -moz-transform: rotate(-70deg);
 -ms-transform: rotate(-70deg);
 -o-transform: rotate(-70deg); content:"";
}
</style>

<div id="star5"></div>
Demo:

Star 6 points

Code:
<style type="text/css">
#star6 {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid #05ed08;
 position: relative;
}
#star6:after {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid #05ed08;
 position: absolute;
 content: "";
 top: 30px;
 left: -50px;
}
</style>

<div id="star6"></div>
Demo:

Star 8 points

Code:
<style type="text/css">
#star8 {
 background: blue; width: 80px;
 height: 80px;
 position: relative;
 -webkit-transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 -ms-transform: rotate(20deg);
 -o-transform: rotate(20eg);
}
#star8:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 80px;
 width: 80px;
 background: blue;
 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 -ms-transform: rotate(135deg);
 -o-transform: rotate(135deg);
}
</style>

<div id="star8"></div>
Demo:

Star 12 points

Code:
<style type="text/css">
#star12 {
 background: blue;
 width: 80px;
 height: 80px;
 position: relative;
}
#star12:before, #star12:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 80px;
 width: 80px;
 background: blue;
}
#star12:before {
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 -ms-transform: rotate(30deg);
 -o-transform: rotate(30deg);
}
#star12:after {
 -webkit-transform: rotate(60deg);
 -moz-transform: rotate(60deg);
 -ms-transform: rotate(60deg);
 -o-transform: rotate(60deg);
}
</style>

<div id="star12"></div>
Demo:

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
Star shapes with CSS

Last accessed pages

  1. Creating Functions in ActionScript (597)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (33240)
  3. Ajax-PHP Chat Script (24797)
  4. Remove / Get duplicate array values - Reset array keys in PHP (5731)
  5. Add, Change, and Remove Attributes with jQuery (21297)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (43804)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (33240)
  3. Read Excel file data in PHP - PhpExcelReader (33105)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (29933)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (27253)