CSS triangle with border

Question

I've made a css triangle like so:

width: 0; 
height: 0; 
border-top: 10px solid transparent;
border-bottom: 10px solid transparent; 
border-right:10px solid blue;

How can I add a border to the triangle?

Please see [this answer](http://stackoverflow.com/a/9450768/3227787). — Bruno Toffolo, Jan 29 '14 at 13:45
http://stackoverflow.com/questions/21216537/box-shadow-on-css-triangle-not-working/21216791#21216791 — Naele, Jan 29 '14 at 13:59

score 2 · Answer 1 · edited May 23 '17 at 12:32

the easiest way is to stack 2 element (tag + tag or tag + tag:pseudo-element) width relative/absolute positionning playing with border size) as xplained within link: CSS triangle custom border color

But if you want a triangle sizeable, containing text or image , translucide or with a background, you can use CSS3 transform and 2 elements: demo http://codepen.io/gc-nomade/pen/gdoGA

CSS

.triangle {
  display:inline-block;
  margin: 0 1em;
  padding-top:5px;/* room for box-shadow eventually */
  width:10em;
  border-bottom:2px solid;/* bottom border of triangle */
  overflow:hidden;/* hide part of span */
  position:relative; /* trigger it to be reference for absolute childs */
  text-align:center;
  color:turquoise; /* it gives as well  border and shadow color if not define else where */
  text-shadow: 1px 1px 1px black, -1px -1px 1px white;
  box-shadow:0 4px 5px -5px black; /* we can give a reduced shadow */
}
/* now, set an height to triangle and center text */
.triangle p {
  margin:0;
  display:inline-block;/* inline-boxe can vertical-align aide another one */
  max-width:50%; /* try to keep it inside drawn triangle */
  padding-bottom:5%; /* get it not too close to bottom */
}
.triangle:before {
  content:'';
  display:inline-block;/* to set aside text */
  padding-top:50%; /* gives a triangle shape to div with height equal to minimum halh of width */
  vertical-align:bottom;/* make sure text is layed from bottom */
}
.triangle .notext {/* this will draw the 2 other edges of triangle */
  width:100%;
  background:linear-gradient(to bottom right,pink 5%,yellow 15% ,purple 30%);
  padding-top:100%;/* here we want a square or a container high enough */
  position:absolute; /* off the flow to disturb nothing */
  z-index:-1; /* don 'hide other content */
  border:2px solid; /* borders ! */
  left:0;
  transform:rotate(45deg); /* turn it a bit */
  transform-origin: 24.5% 59.5% ; /* control point of rotation */
  box-shadow:0 0 5px black; /* yes we can */
}
/* check if any size is fine */
.triangle + .triangle {
  width:15em;
}
.triangle + .triangle + .triangle {
  width:8em;
}
div#auto.triangle {width:auto;}
body {
  background:repeating-linear-gradient(to left, gray, purple,lime,violet,turquoise,orange,white 5em);
  text-align:center;
}

HTML base :

<div class="triangle"> 
  <p>SOME TEXTE</p> 
  <span class="notext"></span>
</div>

To tune shape or rotation of your triangle you may change border-xx of div , , use the padding-top (of both div / span) , transform-origin and transform:rotate(xxdeg) & eventually width of span.

CSS triangle with border

1 Answers1