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.Bruno Toffolo– Bruno Toffolo2014-01-29 13:45:15 +00:00Commented Jan 29, 2014 at 13:45
-
stackoverflow.com/questions/21216537/…Naele– Naele2014-01-29 13:59:06 +00:00Commented Jan 29, 2014 at 13:59
Add a comment
|
1 Answer
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.
