0

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.

Fence-Over

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.

Igor
  • 3,573
  • 4
  • 33
  • 55
  • possible duplicate of [How does this CSS triangle shape work?](http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work) – apaul Dec 09 '13 at 00:25
  • 3
    http://css-tricks.com/examples/ShapesOfCSS/#hexagon – apaul Dec 09 '13 at 00:27

2 Answers2

3

You can use canvas this way:

Demo

enter image description here

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
Community
  • 1
  • 1
1
#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>
Conor
  • 168
  • 9
  • would you mind creating a Demo, or [JSFiddle](http://www.jsfiddle.net) for us, and perhaps elaborating on your answer a little bit? – Malachi Dec 13 '13 at 15:32