Geek Answers Handbook

What part of this CSS makes this triangle dull?

.example-number:after { border-color: transparent #FFFFFF; border-style: solid; border-width: 0 0 140px 55px; bottom: -140px; content: ""; position: absolute; right: 85px; }

This is the code for the dull triangle in the red voice bubble with the inscription "57" at http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ . I see that the width of the border is used to control the triangle, but why is the triangle dull and not right?

+4
source share
2 answers

I believe you need before and after selectors:

 /* creates the larger triangle */ .example-number:before { content:""; position:absolute; bottom:-140px; right:0; border-width:0 0 140px 140px; border-style:solid; border-color:transparent #C91F2C; } /* creates the larger triangle */ .example-number:after { content:""; position:absolute; bottom:-140px; right:85px; border-width:0 0 140px 55px; border-style:solid; border-color:transparent #fff; }

Red is created using :before , and part of it is erased using :after .

+3
source

jswolf19 is correct. You can also do this if you have an extra hip:

 .example-number:before { content: ""; position: absolute; bottom: -140px; right: 40px; border-width: 0 0 140px 100px; border-style: solid; border-color: transparent #C91F2C; -webkit-transform: skewX(-30deg); -moz-transform: skewX(-30deg); transform: skewX(-30deg); }

... and skip :after - note that the only thing I changed is transform: skewX(-30deg); and right from 0 to 40px

+1
source

More articles:


All Articles