How to create text stroke and triangle with pure CSS?

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.

enter image description here

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.

Part of this question (creation of triangle) is a duplicate of many questions in the css-shapes tag. [This](http://stackoverflow.com/questions/18057669/border-within-border-css/18058163#18058163) is one sample and [this](http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work) is another one. However, I am not voting to close as dupe because this question has another part to it. — Harry, Feb 16 '15 at 06:00
@Harry, Thank you for your comment. Now I have a triangle part work. But see above image it has a one side border of that triangle. Can you tell me how can I get this border? This is my code sofar http://jsbin.com/hoxajulexe/1/ — user3733831, Feb 16 '15 at 06:16
@user3733831: The first question to which I linked in my previous comment would help you to achieve the border on one side. You can either use an extra pseudo-element (or) box-shadows. — Harry, Feb 16 '15 at 06:18
"I need to create this style only using CSS without using any images." why? CSS is the wrong tool for this job. — zzzzBov, Feb 16 '15 at 06:30
I seem to remember that [Lea Verou](http://lea.verou.me/) has given a few talks about this. May be worth searching for her name on YouTube (or elsewhere). — Sverri M. Olsen, Feb 16 '15 at 09:23

jbutler483 · Answer 1 · 2015-02-16T11:57:51.990

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

score 0 · Answer 2 · edited Feb 16 '15 at 09:20

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>

How to create text stroke and triangle with pure CSS?

2 Answers2

Text Stroke