Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Boris Kamp
Boris Kamp
16,660 Points

design solution question

Hi guys!

sorry for the broad title, I had no idea how to name this. Please see this screenshot of the design I got handed. https://www.dropbox.com/s/jj5zb1t1c45q81l/product%20price.png?dl=0 Inside the red circle are those small triangles, how can I best code these? I will style the price label with a relative/absolut position I think

p.s. any mods reading this, they should code all forum links to have a target='blank' property!

Thanks!

2 Answers

Fynn Lehnert
Fynn Lehnert
15,244 Points

Pretty easy actually! just define a :after{} pseudoclass and give it some awesome little css

.price-tag {
 position: relative;
}
.price-tag:after {
    /* basics for an :after class */ 
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    /* magic border triangle explained here http://codepen.io/chriscoyier/pen/lotjh
    watch this and you'll understand it in seconds */
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-bottom: 5px solid #957740;

    /* rotate the arrow to fit your design*/
    transform: rotateZ(45deg);
}

http://codepen.io/chriscoyier/pen/lotjh

Boris Kamp
Boris Kamp
16,660 Points

Thanks! worked perfectly!

Boris Kamp
Boris Kamp
16,660 Points
Boris Kamp
Boris Kamp
16,660 Points

Any clue on how to achieve this strike-trough as well? https://www.dropbox.com/s/jxouvs8hoq12m4w/product%20price2.png?dl=0

Thanks Fynn!

Fynn Lehnert
Fynn Lehnert
15,244 Points

from a design perspective I'd actually just use text-decoration: line-through;

but to answer your question correctly, i would use a :before pseudo-class

something like this 

.price-tag--old:before {
  content: '';
  display: block;

  height: 2px;
  width: 80%; /*works only if the parent has a size set!*/
  transform: rotateZ(15deg); /*tweak that until it fits the layout*/
  position: absolute;
  top: calc(50% - 1px); /*calculates the middle height*/
  left: 10%;
}
Boris Kamp
Boris Kamp
16,660 Points

Thanks Fynn I thought of that as well, way easier, will try to convince my client of that as well, if not I'll go with your solution. thanks for your awesome guidance!

Fynn Lehnert
Fynn Lehnert
15,244 Points

great! my pleasure!