How to add a border to the border?

Question

I have the following item whose pointed area is created using border. I need to place a border on this border. I have tried using shadow but it does not solve the problem.

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

 <div id="hexagon"> 

If I'm changing the values of border-left , border-right or border-top in percentages, it doesn't work.

Edit:

Here is what I am trying to achieve. A white area which is rectangular on top pointed downwards at bottom and has a border of a different color.

Answer 1

You can't add a border directly, but you can build it up the same way using a different pseudo-element offset by 1px. Here, I'm creating a black shape that lies under the red shape, 1px down.

 #hexagon { width: 100px; height: 55px; background: red; position: relative; border:1px solid black; } #hexagon:after, #hexagon:before { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red; } #hexagon:before { bottom: -26px; border-top-color: black; } 

 <div id="hexagon"></div> 

Answer 2

As Andy says, the usual trick is creating the same shape a bit bigger, or shifted to some side.

However, you should take angles into consideration. For example, consider the left edge. If the new "border" starts 10px to the left, the border width will look like 10px.

But now consider the diagonal edge, let's consider it has a 45deg slope. If you start 10px to the left, human eyes will calculate the border width in the perpendicular direction, so it will be 7.07px. If you start 10px to the left and 10px to to the bottom, now it will be 14.14px.

So this doesn't scale right. In some cases you may use trigonometry math to do it, but it may get complicated.

Instead, the solution is: use SVG .

Answer 3

I've adjusted your code to use a second pseudo element and positioning it a little bit lower than the previous one.

 #hexagon { width: 100px; height: 55px; background: red; position: relative; } #hexagon:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red; } #hexagon:before { content: ""; position: absolute; bottom: -27px; left: -2.5px; width: 0; height: 0; border-left: 52px solid transparent; border-right: 52px solid transparent; border-top: 27px solid blue; } 

 <div id="hexagon">