How to give an octagon CSS to create a full border?

Question

I am trying to take this css Octagon and give it a solid red frame. However, when I add a border, it only works on part of the form. Does anyone have a solution for this?

Here is JS FIDDLE

HTML

<div class='octagonWrap'> <div class='octagon'></div> </div> 

CSS

 .octagonWrap{ width:200px; height:200px; float: left; position: relative; } .octagon{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } .octagon:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: rotate(45deg); background: #777; content: ''; border: 3px solid red; } 

Answer 1

You can change your own code to work with this. Right now, you have rules for .octagon , which should be for .octagon-wrapper , and rules for .octagon::before , which should be for .octagon . Just change the CSS rules and apply them to your parents by changing the border .octagon::before property inherited from .octagon .

 .octagonWrap { width:200px; height:200px; float: left; position: relative; overflow: hidden; } .octagon { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; transform: rotate(45deg); background: #777; border: 3px solid red; } .octagon:before { position: absolute; /* There needs to be a negative value here to cancel * out the width of the border. It currently -3px, * but if the border were 5px, then it'd be -5px. */ top: -3px; right: -3px; bottom: -3px; left: -3px; transform: rotate(45deg); content: ''; border: inherit; } 

 <div class='octagonWrap'> <div class='octagon'></div> </div> 

Answer 2

SVG Solution

I don't know if using svg is an option,
If so, then how to do it simply.

 <svg viewBox="0 0 75 75" width="200px"> <path d="m5,22 18,-18 28,0 18,18 0,28 -18,18, -28,0 -18,-18z" stroke="red" stroke-width="2" fill="black" /> </svg> 

Answer 3

You can use the online calculator (or calculate it manually) to calculate the size at which the aspect ratio and total height are.

Then, using some pseudo and span element, you can create this form with:

 .oct { height: 241px; width: 100px; background: none; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 10px solid tomato; border-bottom: 10px solid tomato; margin: 100px auto; transition: all 0.8s; } .oct:before, .oct:after, .oct span { content: ""; position: absolute; height: inherit; width: inherit; background: inherit; -webkit-box-sizing: inherit; box-sizing: inherit; border: inherit; top: -10px; z-index:-1; } .oct:before { left: -100%; transform: rotate(-45deg); transform-origin: top right; } .oct:after { left: 100%; transform: rotate(45deg); transform-origin: top left; } .oct span { height: inherit; width: inherit; background: inherit; transform: rotate(90deg); } .oct:hover { transform: rotate(180deg); } 

 <div class="oct"> <span></span> </div> 

Answer 4

Imagine that these red lines extend until they touch each other. This square (rotated by 45%) has a full border, you just do not see the "cut-off" corners due to overflow: hidden;

This seems to work (but does it by adding two additional divs, so there may be a better way):

 <div class='octagonWrap'> <div class='octagon'></div> <div class='vert'> </div> <div class='hort'> </div> </div> 

and then add tihs css:

 .vert { position: absolute; left: 60px; border-top: 3px solid red; border-bottom: 3px solid red; height: 194px; width: 80px; } .hort { position: absolute; top: 60px; border-left: 3px solid red; border-right: 3px solid red; width: 94px; height: 80px; } 

Answer 5

You should try using the HTML5 canvas element. You must be able to draw a polygon and then add a stroke to it.