Theory
Theory
Comments

Real-Life Triangles, Part 2

Now let’s add the additional classes arrow-up and arrow-down, which will indicate the direction of the up and down arrows.

For the up arrow, you will need to remove the upper frame from the pseudo-element, and for the down arrow you will need to remove the lower frame. To make the arrows behave like flowing text, we assigned the block-inline type to the pseudo-elements.

And the last step is to hide the text of the label for the link. To do this, simply set the font size to zero.

There is also a more complex version of the arrows that is used for sorting: when two arrows are created for each parameter at once. This option is implemented in a similar way, but here both pseudo-elements ::before and ::after are used to create the arrows.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Real-Life Triangles, Part 2</title> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body class="geometry"> <div class="goods"> <p> Sorting: <a class="arrow arrow-up" href="#">Ascending</a> <a class="arrow arrow-down" href="#">Descending</a> </p> <ul> <li>Toy mouse</li> <li>“Sheep hunter” cat teaser</li> <li>“Wolverine” scratching post </li> <li>Fragrant dill weed for gourmet cats</li> </ul> </div> </body> </html>

CSS

a.arrow { display: inline-block; margin: 0 10px; } .arrow::before { border: 20px solid #0074d9; border-right-width: 10px; border-right-color: transparent; border-left-width: 10px; border-left-color: transparent; content: ""; } .arrow-up::before { } .arrow-down::before { }

Goalscompleted

For .arrow-down::before, set the thickness of the lower frame to zero,
and then for .arrow-up::before set the thickness of the upper frame to zero.
Assign the display: inline-block property to .arrow::before,
and then set the font size to zero for the .arrow links themselves.

Real-Life Triangles, Part 2

Comments

Log in

Sign up

Restore access