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. Snap to Objects and Snap Align (1721)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (73561)
  3. Node.js Working with Directories (724)
  4. Properties and Methods of the window object (18)
  5. Convert XML to JSON in PHP (8170)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (585)
  2. Read Excel file data in PHP - PhpExcelReader (518)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (492)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (419)
  5. PHP getElementById and getElementsByTagName (351)