How to create text stroke and triangle with pure CSS? - html

Question

I am trying to create a css design like the image attached below. Actually I need to create this style only using CSS without using any images.
I tried get it to work but not sure How to create inner triangle.
This is my HTML -
body {
background: #cdc6e1;
}
.content-box {
background: #28166f;
width: 250px;
height: 100px;
}
.tag {
background: #f8c300;
width: 100px;
height: 0;
padding-left: 10%;
padding-bottom: 10%;
overflow: hidden;
}
.tag:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-bottom: 500px solid #f8c300;
}
<div class="content-box">
<div class="tag">
<h1>1<span>st</span></h1>
</div>
<div class="name">
<h1>First<br>
Place</h1>
</div>
</div>
Hope somebody may help me out to achieve to this custom style.
Thank you.

Answer 1

A basic mockup would be to use some pseudo elements in order to generate this:
.outer {
height: 200px;
width: 400px;
background: purple;
border: 10px solid pink;
position: relative;
text-Align: right;
font-size: 50px;
line-height: 200px;
}
.outer:before,
.outer:after {
height: 0;
width: 0;
position: absolute;
content: "";
border-bottom: 100px solid yellow;
border-right: 70px solid transparent;
border-left: 70px solid transparent;
bottom: 0;
left: 20px;
z-index: 8;
}
.outer:after {
border-bottom: 130px solid blue;
border-right: 90px solid transparent;
border-left: 90px solid transparent;
z-index: 0;
}
.place {
position: absolute;
left: 50px;
color: red;
bottom: -20px;
font-size: 100px;
line-height: initial;
z-index: 10;
text-shadow:
3px 3px 0 white,
/* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
}
<div class="outer">First Place
<div class="place">1st</div>
</div>
Note. The text outline property is yet to be implemented in any of the major browsers yet, so it may require a 'larger white text' to be positioned behind to create this text outline in your mockup.
A workaround (as stateed in the comments) would be to 'hack' the text shadow:
text-shadow:
3px 3px 0 white, /* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
Text Stroke
Although only available in webkit broswers, you may possibly want to use text-stroke for your 'white border' to the text (unavailable in IE or Firefox)
div {
font-size: 50px;
position: relative;
height: 50px;
width: 50px;
color: black;
}
div:before {
content: "1st";
z-index: -1;
left: 0;
top: 0;
position: absolute;
-webkit-text-fill-color: black;
-webkit-text-stroke: 8px red;
}
html {
background: gray;
}
<div>
1st
</div>
<br/>
<strong>Note</strong> only available in webkit browsers

Answer 2

Create a duplicate triangle and place it behind. Code given below. JSBin: http://jsbin.com/totewinizu/2/
HTML:
.tag {
width: 100px;
display: block;
position: relative;
top: 20px;
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 0px 60px 80px 60px;
height: 0px;
width: 0px;
z-index: 99;
}
.dupe {
position: absolute;
border-color: transparent transparent white transparent;
border-style: solid;
border-width: 0px 60px 80px 60px;
top: 40px;
left: 20px;
z-index: 9;
}
<div class="content-box">
<div class="tag">
<h1>1</h1><span>st</span>
</div>
<div class='tag dupe'>
</div>
<div class="name">
<h1>First<br>
Place</h1>
</div>
</div>