How can I get my text inside of my CSS shape?

Question

I am trying to learn how to use the :before to put text into my shape, however I am stuck and not sure how it actually works.

Here is the basic setup:

<div class="trapezoid"> Hello </div>

with

div {
    border-top: 100px solid blue;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
  position: relative;
}

div:before {
  position: absolute;
  top:0;
  height:0;
  width: 100%;
}

However, the text appears below the shape. Here is my fiddle: http://jsfiddle.net/om2wf48t/

That's because the css code you have is using border-top to create the main body of the shape and border-top will push the content you put inside to the bottom I would reconsider your approach and use the method from the answer on this question instead: https://stackoverflow.com/questions/8718587/is-it-possible-to-style-a-div-to-be-trapezoidal — Cave Johnson, Sep 14 '16 at 22:16
Before I found that link I was playing around with your fiddle. Here is what I did: https://jsfiddle.net/om2wf48t/2/ — Cave Johnson, Sep 14 '16 at 22:17
...also looks like you are missing the `content` property inside your `:before` — AA2992, Sep 14 '16 at 22:17
or simply wrap your text in a span, set position to absolute and add a negative top margin, a dirty approach but works! [fiddle](http://jsfiddle.net/om2wf48t/3/) — Rabby, Sep 14 '16 at 22:27

score 3 · Accepted Answer · edited Sep 19 '16 at 16:54

Example code: http://codepen.io/skylarjhdownes/pen/mAPwKW

So, basically what's happening here is that you're making a div that has the word "Hello" in it, and then applying a couple of css rules to all the divs on your page.

One very simple answer that will put your text inside the shape is "Change border-top to border-bottom.", but that will invert your trapezoid and doesn't actually use the trick you're trying to learn.

The main thing preventing you from using the trick is, as Ankith pointed out, that you're missing the content property in your div:before block. Check out MDN's examples for before:, they all have one. If you remove the text "Hello" from your <div> tag and put content:"Hello."; in your div:before then you'll be halfway there, but your text won't have moved. Next you'll need to change the top property to have a value other than zero so that your text will move. top:-20px or even better, top:-2em will put your text inside of your trapezoid.

Bonus: There are several things in your original code that aren't really doing anything. If you delete everything in the div:before block, for example, it won't change your page. Neither would deleting class="trapezoid".

Your class="trapezoid" code is a good idea though. If you change div to div.trapezoid in your css, then class="trapezoid" will be relevant, and you can control which divs in your page have trapezoids on them.

How can I get my text inside of my CSS shape?

1 Answers1