CODEWITHSUNDEEP
css
user1354934
user1354934

Reputation: 8841

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

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/

Upvotes: 0

Views: 2492

Answers (1)

Skylar
Skylar

Reputation: 105

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.

Upvotes: 3

Related Questions