When designing a website, a web page needs transitions between sections just like texts would with paragraphs. A simple way to create flow and encourage users to keep scrolling down can be done by adding an inverted triangle, resembling an arrow, at the end of a section.
A downward-pointing arrowhead at the bottom of a div can be created with some basic CSS and the ::after pseudo-element.
The ::after pseudo-element can be used to add some styling after an element to draw an arrow that pierces into the next section of a web page. It’ll promote continuity and will illustrate a directional compass for visitors of your website.
Using the aforementioned pseudo-element will allow you to integrate this transition effect without the use of an image. This way, you can make styling edits on the fly, which wouldn’t be possible if an image was used.
SET UP THE HTML
- 1. Setting up the HTML is straightforward with the standard boilerplate template from an index.html page.
- 2. A div element was created within the body tags with a class of container and a class name to use as the CSS selector.
- 3. Within the div tags, an h2 tag was used for this example with the class named “content” purely for the purpose of adding some styling.
ADDITIONAL CSS USED
CSS positioning of position: absolute is required because the position of the arrow is dependent on the bottom of the div it is attached to. The CSS property of content with an empty string value indicated by empty quotes were also used.
The actual arrowhead is drawn by using border-top , border-left and border-right properties within the pseudo-class selector (more on this below).
All other CSS rules used were basic properties used for styling purposes.
ARROW AT BOTTOM OF A DIV EFFECT WITH CSS
- Create an index.html file, copy and paste the HTML code below.
- Create a style.css file, copy and paste the CSS code below.
- The output should look like this:
The border-top , border-left and border-right values are used to alter the size and skew of the triangle. Try changing the pixel values and you’ll be able to see how the change in values change the appearance of the arrow.
Note that the border-left and border-right color values have to be set to transparent for this effect to take place. In fact, you can see how it is working behind the scenes by using Inspect Tools.
The arrow at the bottom of a div element can be used for a few different purposes. Simply changing the height of the div will allow you to use the element as a banner, as shown above, or as a section.
The image produced by using Inspect Tools from the browser should paint a picture as to how the CSS styling is generated. It should be noted that deleting the “content here” text will change the appearance of the triangle so some basic CSS spacing may be needed as the content changes.