• 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 tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Complex Shapes with a single DIV and CSS

Last accessed pages

  1. Add and Remove HTML elements and Content with jQuery (17347)
  2. CSS cursor property - Custom Cursors (3102)
  3. Remove / Get duplicate array values - Reset array keys in PHP (5853)
  4. Add Tag to Selected Text in textarea with JavaScript (751)
  5. Add, Change, and Remove Attributes with jQuery (22007)

Top accessed pages

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