Border within border CSS

Question

With the help of CSS Triangle tutorial, I learnt to create triangle shapes.

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;   
        border-top: 20px solid #ccc;
}

I'm trying to add a border to the triangle but I was unable to do it.

what I achieved: enter image description here

Expected:(trying something similar border with gray) enter image description here

Check this JSFiddle

Stuck up no where to start this. I tried outline, but none worked(I know it won't work).

Thanks for taking time to read my question.

Any help is appreciated.

Note: I'm trying this in CSS instead of using images.

Since you use the borders to actually create the triangle, how do you think you would add another border? This technique is more a hack than a legitimate CSS, it works simply because of the way current browsers render border corners. — MightyPork
– MightyPork, Commented Aug 5, 2013 at 12:04
@MightyPork Yes I tried from my side. But you know what I'm trying is a border for the triangle(one side). A slant line css using before pseudo selector. Since mmultiple borders is possible I want to try this using css, I don't know some css Geeks can solve it easily. — Praveen
– Praveen, Commented Aug 5, 2013 at 12:14
are you trying for border only on one side (or) do you want a black border around the triangle? — Harry
– Harry, Commented Aug 5, 2013 at 12:22

Harry · Accepted Answer · 2015-07-23 13:33:55Z

When the main triangle or arrow is itself created using the CSS borders, it is impossible to add another border to it without using extra elements. The below are a few options.

Option 1: Using a bigger size pseudo-element and positioning it behind the parent to produce a border-effect.

.arrow-down {
  position: relative;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #ccc;
}
.arrow-down:before {
  position: absolute;
  content: "";
  left: -22px;
  top: -20px;
  height: 0px;
  width: 0px;
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-top: 21px solid black;
  z-index: -1;
}

<div class="arrow-down"></div>

.arrow-down:before {
  position: absolute;
  content: "";
  left: -22px;
  top: -20px;
  height: 0px;
  width: 0px;
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-top: 21px solid black;
  z-index: -1;
}

Option 2: Rotating the element (which has the border hack to produce the triangle) and then adding a box-shadow to it.

.arrow-down {
  width: 0;
  height: 0;
  margin: 10px;
  border-left: 0px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #ccc;
  -ms-transform: rotate(225deg);  /* IE 9 */
  -webkit-transform: rotate(225deg);  /* Chrome, Safari, Opera */
  -moz-transform: rotate(225deg);
  transform: rotate(225deg);
  box-shadow: 0px -3px 0px -1px #444;
}

<div class="arrow-down"></div>

.arrow-down {
  width: 0;
  height: 0;
  margin: 10px;
  border-left: 0px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #ccc;
  transform: rotate(225deg); /* browser prefixes added in snippet */
  box-shadow: 0px -3px 0px -1px #444;
}

Tested in Chrome v24 and Safari v5.1.7. Should work in other CSS3 compatible browsers also.

The following options do not directly answer the question as it doesn't do a border within border but are others way of producing an arrow/triangle with a border.

Option 3: Using linear-gradients on an element, rotating it to produce the triangle and then adding a border to it using the normal border property.

.arrow-down {
  width: 30px;
  height: 30px;
  margin: 10px;
  border-left: 2px solid #444;
  background: -webkit-linear-gradient(45deg, #ccc 50%, transparent 50%);
  background: -moz-linear-gradient(45deg, #ccc 50%, transparent 50%);
  background: -o-linear-gradient(45deg, #ccc 50%, transparent 50%);
  background: linear-gradient(45deg, #ccc 50%, transparent 50%);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-backface-visibility:hidden; /** <-- to prevent diagonal line aliasing in chrome **/
}

<div class="arrow-down"></div>

.arrow-down {
  width: 30px;
  height: 30px;
  margin: 10px;
  border-left: 2px solid #444;
  background: linear-gradient(45deg, #ccc 50%, transparent 50%);
  transform: rotate(-45deg);
  backface-visibility:hidden;
}

Option 4: Using a rotated pseudo-element (with background as the color of the triangle) to produce the triangle and then adding a normal border to it. The parent element's overflow is set to hidden and the pseudo-element is positioned appropriately so as to display only half of it (creating the illusion of a triangle).

.arrow-down {
  position: relative;
  height: 50px;
  width: 50px;
  overflow: hidden;
}
.arrow-down:before {
  position: absolute;
  content: '';
  top: -webkit-calc(100% * -1.414 / 2);
  top: calc(100% * -1.414 / 2);
  left: 0px;
  height: 100%;
  width: 100%;
  background: #CCC;
  border-left: 2px solid #444;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

<div class="arrow-down"></div>

.arrow-down:before {
  position: absolute;
  content: '';
  top: calc(100% * -1.414 / 2);
  left: 0px;
  height: 100%;
  width: 100%;
  background: #CCC;
  border-left: 2px solid #444;
  transform: rotate(-45deg);
}

+1 I thought that it must be using a before/ after pseudo selector. Hope still there may a wise solution. Let us wait for that :) Thank you so much.

Aljullu · Accepted Answer · 2013-08-05 12:27:42Z

2

Try adding these lines to your CSS:

.arrow-down:before {
    content: "";
    display: block;
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    border-top: 26px solid #0f0;
    position: relative;
        left: -26px;
        top: -20px;
    z-index: -1;
}

This will draw a 3px green border.

Check the result here: jsfiddle

answered Aug 5, 2013 at 12:27

Aljullu

4445 silver badges12 bronze badges

2 Comments

Aljullu Over a year ago

@Harry, you can play with the sizes. Check this one: jsfiddle.net/Q97T7/5

Praveen Over a year ago

@Aljullu +1 from my side. Thank you so much.

daniel__ · Accepted Answer · 2013-08-05 14:49:04Z

Demo: http://jsfiddle.net/3fFM7/

.arrow {
    border-bottom: 60px solid transparent;
    border-left: 60px solid black;
    border-top: 60px solid transparent;
    height: 0;
    margin-left: 50px;
    width: 0;
    behavior:url(-ms-transform.htc);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
}
.arrow > div {
    border-bottom: 59px solid transparent;
    border-left: 59px solid red;
    border-top: 59px solid transparent;
    left: -60px;
    position: relative;
    top: -63px;
    width: 0;
}


<div class="arrow"><div></div></div>

Play with transform rotate :)

Or:

DEMO: http://jsfiddle.net/tKY25/1/

<div class="triangle-with-shadow"></div>


.triangle-with-shadow {
   width: 100px;
   height: 100px;
   position: relative;
   overflow: hidden;
    transform: rotate(180deg);
}
.triangle-with-shadow:after {
   content: "";
   position: absolute;
   width: 50px;
   height: 50px;
   background: #999;
   transform: rotate(45deg);
   top: 75px;
   left: 25px;
   box-shadow: 0px -5px 0 0px rgba(0,0,0,100);
}

Collectives™ on Stack Overflow

Border within border CSS

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related