• Talk Bubble       • Badge Ribbon
  • Infinity               • Chevron
  • Ship

Some complex shapes that can be created with a single DIV and CSS properties, without using image file.

Shape 1

Code:
<style type="text/css">
/* http://coursesweb.net/css/ */
#shp1 {
 height: 0;
 width: 170px;
 background: #b1b0fb;
 position: relative;
 border-bottom: 110px solid #08fb09;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 padding:0 3px;
}

#shp1:before {
 content: "";
 line-height: 0;
 font-size: 0;
 width: 0;
 height: 0;
 border-bottom: 28px solid #b1b0fb;
 border-left: 14px solid transparent;
 position: absolute;
 bottom: 0;
 left: -14px;
}

#shp1:after {
 content: "";
 line-height: 0;
 font-size: 0;
 width: 0;
 height: 0;
 border-bottom: 28px solid #b1b0fb;
 border-right: 14px solid transparent;
 position: absolute;
 bottom: 0;
 right: -14px;
}
</style>

<div id="shp1"><br/>CSS Course:<br/>http://coursesweb.net/</div>
Demo:

CSS Course:
http://coursesweb.net

Talk Bubble

Code:
<style type="text/css">
/* http://css-tricks.com/examples/ShapesOfCSS/ */
#talkbubble {
margin: 10px 25px;
 width: 200px;
 height: 89px;
 background: #05fb08;
 position: relative;
 -moz-border-radius: 14px;
 -webkit-border-radius:
 14px; border-radius: 14px;
 padding: 2px 5px;
}
#talkbubble:before {
 content:"";
 position: absolute;
 right: 100%;
 top: 28px;
 width: 0;
 height: 0;
 border-top: 8px solid transparent;
 border-right: 26px solid #05fb08;
 border-bottom: 13px solid transparent;
}
</style>

<div id="talkbubble"><br/>CSS Course:<br/>http://coursesweb.net/</div>
Demo:

CSS Course:
http://coursesweb.net

Badge Ribbon

Code:
<style type="text/css">
#badgeribbon {
 position: relative;
 background: #08fb09;
 height: 100px;
 width: 100px;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
 padding: 2px;
 text-align: center;
}
#badgeribbon:before, #badgeribbon:after {
 content: "";
 position: absolute;
 margin-top: 8px;
 border-bottom: 70px solid #01fb02;
 border-left: 40px solid transparent;
 border-right: 40px solid transparent;
 top: 70px; left: -5px;
 -webkit-transform: rotate(-140deg); 
 -moz-transform: rotate(-140deg);
 -ms-transform: rotate(-140deg);
 -o-transform: rotate(-140deg);
}
#badgeribbon:after {
 left: auto;
 right: -5px;
 -webkit-transform: rotate(140deg);
 -moz-transform: rotate(140deg);
 -ms-transform: rotate(140deg);
 -o-transform: rotate(140deg);
}
</style>

<div id="badgeribbon"><br/>CoursesWeb</div>
Demo:

CoursesWeb


Infinity

Code:
<style type="text/css">
#infinity {
 position: relative;
 width: 212px;
 height: 100px;
}
#infinity:before, #infinity:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 60px;
 height: 60px;
 border: 20px solid blue;
 -moz-border-radius: 50px 50px 0 50px;
 border-radius: 50px 50px 0 50px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
#infinity:after {
 left: auto;
 right: 0;
 -moz-border-radius: 50px 50px 50px 0;
 border-radius: 50px 50px 50px 0;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
}
</style>

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

Chevron

Code:
<style type="text/css">
#chevron {
 position: relative;
 text-align: center;
 padding: 12px;
 margin: 6px auto;
 height: 60px;
 width: 200px;
}
#chevron:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 51%;
 background: #efabcd;
 -webkit-transform: skew(0deg, 6deg);
 -moz-transform: skew(0deg, 6deg);
 -ms-transform: skew(0deg, 6deg);
 -o-transform: skew(0deg, 6deg);
 transform: skew(0deg, 6deg);
}
#chevron:after {
 content: "";
 position: absolute;
 top: 0;
 right: 0;
 height: 100%;
 width: 50%;
 background: #efabcd;
 -webkit-transform: skew(0deg, -6deg);
 -moz-transform: skew(0deg, -6deg);
 -ms-transform: skew(0deg, -6deg);
 -o-transform: skew(0deg, -6deg);
 transform: skew(0deg, -6deg);
}
</style>

<div id="chevron"></div>
Demo:
CSS style

Ship

Code:
<style type="text/css">
#ship {
 margin:30px 0 5px 20px;
 position: relative;
 width: 200px;
 border-width: 50px 28px 0;
 border-style: solid;
 border-color: #ccddef transparent;
 font-weight: bold;
}
#ship:before {
 content: "";
 position: absolute;
 height: 0;
 width: 0;
 top: -85px;
 left: -15px;
 border-width: 0 45px 35px;
 border-style: solid;
 border-color: transparent transparent #bbcdef;
}

/* Content */
#ship div{
 position:absolute;
 top:-30px;
}
</style>

<div id="ship"><div>http://CoursesWeb.net</div></div>
Demo:
http://CoursesWeb.net

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute is used in <a> tag for the address of the link?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
  font-family:"Calibri",sans-serif;
}
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr = array(1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Complex Shapes with a single DIV and CSS

Last accessed pages

  1. Zuma Games (9548)
  2. Zuma Deluxe (11238)
  3. Bubbles3 (9809)
  4. jQuery ajax() method (10720)
  5. Adding data from HTML Table Rows in Form fields (2306)

Top accessed pages

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