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 tag is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Diamond shape with CSS

Last accessed pages

  1. Clear Canvas Context (2829)
  2. JavaScript code and PHP (14415)
  3. Backgammon (5527)
  4. PHP Simple HTML DOM Parser (5822)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (38710)

Popular pages this month

  1. Qwop (4094)
  2. Bubbles3 (3536)
  3. Butterfly Kyodai (2503)
  4. Zuma Deluxe (2305)
  5. Backgammon (1198)