Make form with css or canvas

I wonder if it is possible to create the image below, using css or canvas? It seems possible but do not have the ways to accomplish such a feat.

Grateful for the time spent.

Edit {SOLVED}

With the help of friend @ apaul34208, could do as follows: http://jsfiddle.net/Igaojsfiddle/CcDG7/

#hexagon {
    width: 50px;
    height: 55px;
    background: red;
    position: relative;
}

#hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid red;
}

Thank you all.

Answers


You can use canvas this way:

Demo

HTML

<canvas id="demo" width=90 height=120></canvas>

JavaScript

var ctx = demo.getContext('2d'),  /// get canvas element
    w = demo.width,               /// cache dimensions
    h = demo.height,
    cw = w * 0.5;                 /// center hori.

ctx.beginPath();                  /// start path
ctx.moveTo(0, 0);                 /// plot shape
ctx.lineTo(w, 0);
ctx.lineTo(w, h - cw * 0.8);
ctx.lineTo(cw, h);
ctx.lineTo(0, h - cw * 0.8);
ctx.closePath()                   /// closes and ends last line
ctx.fillStyle ='#f55641';
ctx.fill();                       /// fill shape

#square {
   width: 90px; 
   height: 85px; 
   background: #f55641; 
}
#triangle { 
   width: 0; 
   height: 0;
   border-top: 35px solid #f55641;
   border-left: 45px solid transparent; 
   border-right: 45px solid transparent; 
}

<div id="square"></div>
<div id="triangle"></div>

Need Your Help

perl script need improving mysql search code

mysql search keyword

i am trying to create search function in my perl script by mysql

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.