CSS Drawing Hexagon

<span id="Label3"></p><p><p>CSS ID Selector implements positive hexagon</p></p><p><p>Using CSS to draw a hexagon requires three containers to draw the three parts of the hexagon, as shown in:</p></p><p><p></p></p><p><p>HTML code:</p></p><pre><span style="color: #008080;"><span style="color: #008080;">1</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "box1"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;">2</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "box2"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;">3</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "box3"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> </pre><p><p>CSS Code:</p></p><pre><pre><span style="color: #000000;">#box1 {width:0;border-left:52px Solid transparent;border-right:52px solid transparent;border-bottom:30px solid #6c6; c10/>} #box2 {width:104px;height:60px;background-color: #6c6;} #box3 {width:0;border-top:30px solid #6c6; border-left:52px solid transparent;border-right:52px Solid transparent;}</span></pre></pre><p><p></p></p><p><p></p></p><p><p></p></p><p><p>CSS Code:</p></p><p><p></p></p><pre><pre><span style="color: #008080;">1</span> <span style="color: #000000;">#box4 {width:0;border-right:30px Solid #6c6; border-top:52px Solid transparent;border-bottom:52px Solid transparent;float:left;}</span> <span style="color: #008080;">2</span> <span style="color: #000000;">#box5 {width:60px;height:104px;background-color: #6c6; float:left;}</span> <span style="color: #008080;">3</span> #box6 {width:0;border-left:30px solid #6c6; border-top:52px Solid transparent;border-bottom:52px Solid transparent;float:left;}</pre></pre><p><p>HTML code:</p></p><pre><span style="color: #008080;"><span style="color: #008080;">1</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "box1"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;">2</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "box2"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;">3</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "box3"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> </pre><p><p></p></p><p><p>CSS3 is implemented for Elements:</p></p><p><p></p></p><pre><span style="color: #008080;"><span style="color: #008080;">1</span></span> <span style="color: #800000;"><span style="color: #800000;">#hexagon</span></span>{<span style="color: #008080;"><span style="color: #008080;">2</span></span> <span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">100px</span></span>;<span style="color: #008080;"><span style="color: #008080;">3</span></span> <span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">55px</span></span>;<span style="color: #008080;"><span style="color: #008080;">4</span></span> <span style="color: #ff0000;"><span style="color: #ff0000;">background</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Red</span></span>;<span style="color: #008080;"><span style="color: #008080;">5</span></span> <span style="color: #ff0000;"><span style="color: #ff0000;">position</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">relative</span></span>;<span style="color: #008080;"><span style="color: #008080;">6</span></span>}<span style="color: #008080;"><span style="color: #008080;">7</span></span> <span style="color: #800000;"><span style="color: #800000;">#hexagon: before</span></span>{<span style="color: #008080;"><span style="color: #008080;">8</span></span> <span style="color: #ff0000;"><span style="color: #ff0000;">content</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;"> ""</span></span>;<span style="color: #008080;"><span style="color: #008080;">9</span></span> <span style="color: #ff0000;"><span style="color: #ff0000;">position</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Absolute</span></span>;<span style="color: #008080;"><span style="color: #008080;">Ten</span></span> <span style="color: #ff0000;"><span style="color: #ff0000;">Top</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">-25px</span></span>;<span style="color: #008080;"><span style="color: #008080;"></span> one</span> <span style="color: #ff0000;"><span style="color: #ff0000;"></span> left</span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #008080;"><span style="color: #008080;"></span> a</span> <span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #ff0000;"><span style="color: #ff0000;">Border-left</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">50px Solid Transparent</span></span>;<span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #ff0000;"><span style="color: #ff0000;">Border-right</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">50px Solid Transparent</span></span>;<span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #ff0000;"><span style="color: #ff0000;">Border-bottom</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">25px Solid Red</span></span>;<span style="color: #008080;"><span style="color: #008080;"></span> -</span>}<span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #800000;"><span style="color: #800000;">#hexagon:</span> after</span>{<span style="color: #008080;"><span style="color: #008080;"></span> +</span> <span style="color: #ff0000;"><span style="color: #ff0000;">content</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;"> ""</span></span>;<span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #ff0000;"><span style="color: #ff0000;">position</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Absolute</span></span>;<span style="color: #008080;"><span style="color: #008080;"></span> +</span> <span style="color: #ff0000;"><span style="color: #ff0000;">Bottom</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">-25px</span></span>;<span style="color: #008080;"><span style="color: #008080;"></span> a</span> <span style="color: #ff0000;"><span style="color: #ff0000;"></span> left</span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #008080;"><span style="color: #008080;"></span> at</span> <span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #ff0000;"><span style="color: #ff0000;">Border-left</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">50px Solid Transparent</span></span>;<span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #ff0000;"><span style="color: #ff0000;">Border-right</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">50px Solid Transparent</span></span>;<span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #ff0000;"><span style="color: #ff0000;">Border-top</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">25px Solid Red</span></span>;<span style="color: #008080;"><span style="color: #008080;"></span> -</span>}</pre><p><p></p></p><p><p>CSS Drawing Hexagon</p></p></span>