Two diamond shapes, simple created with a single DIV tag and CSS properties.
Code:
<style type="text/css">
#diamond {
 width: 0;
 height: 0;
 border: 50px solid transparent;
 border-bottom: 20px solid #05ed08;
 position: relative;
 top: -50px;
}
#diamond:after {
 content: "";
 position: absolute;
 left: -50px;
 top: 20px;
 width: 0;
 height: 0;
 border: 50px solid transparent;
 border-top: 70px solid #05ed08;
}
</style>

<div id="diamond"></div>
Demo:
Diamond shield

Diamond 2

Code:
<style type="text/css">
#diamond {
 border-style: solid;
 border-color: transparent transparent #0809fe transparent;
 border-width: 0 25px 25px 25px;
 height: 0;
 width: 50px;
 position: relative;
 margin: 10px 0;
}
#diamond:after {
 content: "";
 position: absolute;
 top: 25px;
 left: -25px;
 width: 0;
 height: 0;
 border-style: solid;
 border-color: #0809fe transparent transparent transparent;
 border-width: 70px 50px 0 50px;
}
</style>

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

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which meta tag provides a short description of the page?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 characters that describes the content of the page" />
Which CSS property is used to stop the wrapping effect of the "float"?
clear text-align position
#some_id {
  clear: both;
}
Click on the method which gets an array with all the elements in the document that have a specified tag name.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicate the PHP function which returns the number of elements in array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Diamond shape with CSS

Last accessed pages

  1. HTML Course - Free Lessons (11042)
  2. Register and show online users and visitors (22722)
  3. Pagination Class - Script to paginate content (1618)
  4. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (41518)
  5. The Stage, Panels and Tools in Flash (6329)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (341)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (281)
  3. Register and show online users and visitors (264)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (258)
  5. Insert, Select and Update NULL value in MySQL (162)