Exploring the world of CSS shapes has left me wondering - is it possible to give them solid, dotted, or dashed borders? I came across some examples of shapes that caught my eye (shapes), but making them stand out with different border styles posed a challenge.
Initially, I considered overlaying another shape in the background using z-index (http://jsfiddle.net/gYKSd/), however, this only achieved a solid border effect.
Here's an example snippet:
<div class="triangle"></div>
<div class="background"></div>
The CSS used for styling:
.triangle {
position: absolute;
top: 14px;
left: 10px;
height: 0px;
width: 0px;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 100px solid red;
z-index: 0;
}
.background {
position: absolute;
top: 0;
left: 0;
height: 0px;
width: 0px;
border-right: 60px dotted transparent;
border-left: 60px dotted transparent;
border-bottom: 120px dotted gray;
z-index: -1;
}