CODEWITHSUNDEEP
htmlcss
jskidd3
jskidd3

Reputation: 4783

Add border to 2 sides of CSS triangle?

HTML:

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

CSS:

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid green;
}

Result:

Arrow

Is there any way I can produce a 1 pixel border on the two sides of the result? (the non 180 degree ones)?

Thanks

Upvotes: 1

Views: 3931

Answers (2)

Jose Rui Santos
Jose Rui Santos

Reputation: 15319

You can add a border through before or after pseudo-elements, shifted one pixel to the left.

.arrow-right,
.arrow-right:after {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid black;
}

.arrow-right:after {
    border-left-color: green;
    content: '';
    display: block;
    position: relative;
    left: -61px;
    top: -60px;
}

http://jsfiddle.net/Nh63r/

Upvotes: 3

joequincy
joequincy

Reputation: 1395

100% pure CSS, no... but add an extra div in there and:

HTML

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

CSS

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid black;
}
.arrow-right > div {
    width: 0;
    position: relative;
    left: -60px;
    top: -59px;
    border-top: 59px solid transparent;
    border-bottom: 59px solid transparent;
    border-left: 59px solid green;
}

http://jsfiddle.net/qJJxm/

(replace every instance of 59 with a smaller number to make a wider border - all four should always be the same number)

Upvotes: 4

Related Questions