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>