I am trying to learn how to use the
<div class="trapezoid"> Hello </div>
border-top: 100px solid blue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
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-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 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.
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" code is a good idea though. If you change
div.trapezoid in your css, then
class="trapezoid" will be relevant, and you can control which divs in your page have trapezoids on them.