Arrows guide attention. They hint at direction, connect labels to targets, and show what happens next. In this project you will build five practical CSS arrow patterns you can drop into real UI: a tooltip caret, a speech bubble tail, a dropdown indicator, breadcrumb chevrons, and carousel navigation arrows. You will use a single HTML file and progressive CSS to keep everything light, accessible, and flexible.
Why 5 Ways to Use CSS Arrows in Your UI Matters
Arrows are small, but they carry a lot of meaning. Reaching for an image or an icon font for every arrow creates extra requests and hard-to-theme assets. Pure CSS arrows render crisply at any size, adapt to your design tokens, and avoid extra downloads. They work with pseudo-elements, so you can insert them without extra DOM elements. Once you understand the border-triangle trick and a few positioning patterns, you can cover most arrow use cases with a few reusable classes.
Prerequisites
You only need core front-end skills. We will keep the markup small and lean on variables for theming.
- Basic HTML
- CSS custom properties
- CSS pseudo-elements (::before / ::after)
Step 1: The HTML Structure
The markup includes five small components inside a single container. The tooltip lives next to its trigger for the adjacent sibling selector. The dropdown arrow uses a span inside the button for easy rotation. Breadcrumbs are links inside a nav. Carousel buttons sit around a mock slide. You can paste this into an empty HTML file to follow along.
<!-- HTML -->
<div class="demo">
<!-- 1. Tooltip caret -->
<button class="btn-tooltip" aria-describedby="tip1">Hover me</button>
<span id="tip1" class="tooltip" role="tooltip">Helpful hint appears here</span>
<!-- 2. Speech bubble with tail -->
<div class="bubble" role="note">CSS arrows make callouts feel connected.</div>
<!-- 3. Dropdown indicator arrow -->
<button class="btn-dropdown" aria-expanded="false">
Filters
<span class="arrow-indicator" aria-hidden="true"></span>
</button>
<!-- 4. Breadcrumb chevrons -->
<nav class="breadcrumbs" aria-label="Breadcrumb">
<a href="#">Home</a>
<a href="#">Library</a>
<a aria-current="page">Books</a>
</nav>
<!-- 5. Carousel navigation arrows -->
<div class="carousel" role="region" aria-label="Image carousel">
<button class="nav prev" aria-label="Previous slide"></button>
<div class="slide" role="group" aria-roledescription="slide" aria-label="1 of 3">Slide</div>
<button class="nav next" aria-label="Next slide"></button>
</div>
</div>
Step 2: The Basic CSS & Styling
Set up custom properties for colors, spacing, radius, and arrow sizes. The demo container provides spacing between components. Each component starts from a consistent base so the arrows look like they belong in the same design system.
/* CSS */
:root {
--bg: #0f172a;
--panel: #131c34;
--text: #e2e8f0;
--muted: #94a3b8;
--accent: #60a5fa;
--radius: 10px;
--space: 16px;
--arrow-size: 8px; /* triangle leg length */
--line: 2px;
}
* { box-sizing: border-box; }
body {
margin: 0;
font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
color: var(--text);
background: radial-gradient(1000px 600px at 20% -10%, #1e293b, transparent), var(--bg);
padding: 40px 20px;
}
.demo {
max-width: 900px;
margin: 0 auto;
display: grid;
gap: calc(var(--space) * 1.5);
align-items: start;
}
button, .bubble, .tooltip, .breadcrumbs, .carousel .slide {
background: var(--panel);
border: 1px solid #273249;
border-radius: var(--radius);
}
button {
color: var(--text);
padding: 10px 14px;
cursor: pointer;
border-radius: 8px;
}
button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.tooltip {
position: absolute;
padding: 8px 10px;
font-size: 14px;
color: var(--bg);
background: #f8fafc;
border: 1px solid #d4d9e3;
border-radius: 8px;
white-space: nowrap;
transform: translateY(-10px);
opacity: 0;
pointer-events: none;
}
.btn-tooltip {
position: relative;
display: inline-block;
width: max-content;
}
.bubble {
position: relative;
padding: 14px 16px;
max-width: 520px;
}
.btn-dropdown {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(#1b2642, #151e37);
border: 1px solid #233055;
}
.breadcrumbs {
display: flex;
gap: 18px;
padding: 10px 14px;
align-items: center;
}
.breadcrumbs a {
color: var(--muted);
text-decoration: none;
}
.breadcrumbs a[aria-current="page"] {
color: var(--text);
font-weight: 600;
}
.carousel {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center;
padding: 10px;
}
.carousel .slide {
height: 90px;
display: grid;
place-items: center;
color: var(--muted);
}
Advanced Tip: Put sizes like –arrow-size and –line into variables. You can theme arrows across an app by flipping these values in a light/dark theme or a component scope without touching the arrow logic.
Step 3: Build the Tooltip, Speech Bubble, and Dropdown Arrow
These three patterns cover the most common arrow needs: pointing from a panel toward a trigger, attaching a message to a block, and hinting at expansion. They share a triangle core made with CSS borders.
/* CSS */
/* 1) Tooltip caret pointing down toward its trigger */
.btn-tooltip:hover + .tooltip,
.btn-tooltip:focus + .tooltip,
.btn-tooltip:focus-visible + .tooltip {
opacity: 1;
transform: translateY(-14px);
pointer-events: auto;
}
.btn-tooltip + .tooltip {
left: 0;
top: -8px;
translate: 0 -100%;
}
.tooltip::after {
content: "";
position: absolute;
left: 16px;
top: 100%;
border-left: var(--arrow-size) solid transparent;
border-right: var(--arrow-size) solid transparent;
border-top: var(--arrow-size) solid #f8fafc; /* face color */
filter: drop-shadow(0 1px 0 #d4d9e3);
}
/* 2) Speech bubble tail pointing left */
.bubble::after {
content: "";
position: absolute;
left: -1px;
top: 24px;
border-top: var(--arrow-size) solid transparent;
border-bottom: var(--arrow-size) solid transparent;
border-right: var(--arrow-size) solid var(--panel);
/* crisp border edge */
outline: 1px solid #273249;
outline-offset: -1px;
}
/* 3) Dropdown indicator: small triangle that rotates */
.arrow-indicator {
--arrow: #cbd5e1;
position: relative;
width: 0;
height: 0;
border-left: calc(var(--arrow-size) * 0.75) solid transparent;
border-right: calc(var(--arrow-size) * 0.75) solid transparent;
border-top: calc(var(--arrow-size) * 0.75) solid var(--arrow);
transition: transform 160ms ease, border-top-color 160ms ease;
}
.btn-dropdown[aria-expanded="true"] .arrow-indicator {
transform: rotate(180deg) translateY(-1px);
border-top-color: var(--accent);
}
.btn-dropdown:hover .arrow-indicator {
border-top-color: var(--text);
}
How This Works (Code Breakdown)
The tooltip is absolutely positioned and visually sits above its trigger. The trigger button is position: relative, so the tooltip can align from that anchor. The adjacent sibling selector shows the tooltip on hover and focus for keyboard users. The triangle caret uses the border trick: two transparent sides and one colored side form a crisp pointer. You can learn the underlying pattern in this CSS triangle tutorial. The drop-shadow on the caret fakes a border that matches the panel stroke.
The speech bubble tail repeats the border triangle trick, but points to the left. The outline gives it the same border thickness as the bubble body without extra HTML. If you want a complete bubble kit with multiple tail positions, this speech bubble shape guide will help you mix tails, corners, and sizes consistently.
The dropdown indicator is a small triangle drawn with borders. The span carries the geometry, and aria-expanded on the button controls rotation. This keeps state styling declarative. On hover, the color brightens to match the button text. When expanded, it flips by 180 degrees, which reads as “open.”
Step 4: Build Breadcrumb Chevrons and Carousel Arrows
Now add two navigational arrow styles. Chevrons visually separate breadcrumb items. Carousel arrows invite movement to previous and next content.
/* CSS */
/* 4) Breadcrumb chevrons made from borders */
.breadcrumbs a {
position: relative;
padding-right: 18px;
}
.breadcrumbs a:not(:last-child)::after {
content: "";
position: absolute;
right: 2px;
top: 50%;
width: 8px;
height: 8px;
border-right: var(--line) solid var(--muted);
border-bottom: var(--line) solid var(--muted);
transform: translateY(-50%) rotate(-45deg);
}
/* Hover/visited color sync */
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs a:hover::after {
border-color: var(--text);
}
/* 5) Carousel navigation arrows (triangles) */
.carousel .nav {
position: relative;
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(#1b2642, #151e37);
border: 1px solid #233055;
}
.carousel .nav::before {
content: "";
position: absolute;
top: 50%;
translate: 0 -50%;
}
.carousel .nav.prev::before {
left: 16px;
border-top: var(--arrow-size) solid transparent;
border-bottom: var(--arrow-size) solid transparent;
border-right: var(--arrow-size) solid var(--text);
}
.carousel .nav.next::before {
right: 16px;
border-top: var(--arrow-size) solid transparent;
border-bottom: var(--arrow-size) solid transparent;
border-left: var(--arrow-size) solid var(--text);
}
.carousel .nav:hover {
border-color: var(--accent);
}
.carousel .nav:hover::before {
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent), transparent 50%));
}
How This Works (Code Breakdown)
The breadcrumb chevrons are not triangles. They are small “L” shapes made from two borders rotated by -45 degrees. This keeps the center transparent, which reads well next to link text on any background. If you prefer filled chevrons, this chevron pattern shows a few shapes you can adapt to breadcrumbs. The chevrons appear via ::after on every link except the last, using :not(:last-child). The effect is scalable by changing –line and the width/height.
The carousel buttons use filled triangles for stronger calls to action. The buttons are circular for a large click target. The triangles live in ::before so the DOM stays clean. The left arrow uses a right-facing triangle built with border-right; the right arrow uses border-left. The filter drop-shadow adds a subtle glow on hover without heavy paint cost.
Advanced Techniques: Animations & Hover Effects
Small movement helps users notice state changes. Use short transitions for micro-interactions and a keyframe nudge for directional hinting. Always respect reduced motion preferences.
/* CSS */
/* Tooltip entrance: fade and rise */
.btn-tooltip:hover + .tooltip,
.btn-tooltip:focus + .tooltip {
transition: opacity 140ms ease, transform 140ms ease;
}
/* Dropdown indicator nudge when opening */
@keyframes arrow-nudge {
0% { transform: translateY(0) rotate(180deg); }
50% { transform: translateY(-2px) rotate(180deg); }
100% { transform: translateY(0) rotate(180deg); }
}
.btn-dropdown[aria-expanded="true"] .arrow-indicator {
animation: arrow-nudge 220ms ease;
}
/* Carousel arrows: gentle slide on hover */
.carousel .nav.prev:hover::before { translate: -1px -50%; }
.carousel .nav.next:hover::before { translate: 1px -50%; }
.carousel .nav::before {
transition: translate 140ms ease, filter 140ms ease;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
Accessibility & Performance
Even decorative arrows affect how people understand and operate your UI. Pay attention to semantics and targets. Keep animations short and scale back when the user asks for less motion. Think about pixel clarity and color contrast so arrows remain legible against your surfaces and states.
Accessibility
For tooltips, link the trigger to the tooltip with aria-describedby as shown. Pure CSS hover-only tooltips vanish for keyboard users who move focus away, so pair this UX with a JavaScript toggle when you ship a production widget. Make sure the tooltip receives focus if it must be interactive. For dropdown indicators, treat the triangle as decorative and add aria-hidden on the arrow span. The state lives on the button via aria-expanded, which is spoken by screen readers. For breadcrumbs, add aria-current=”page” on the last item. Carousel nav buttons get descriptive aria-label values, not just symbols. Keep focus rings visible on all interactive arrows.
Performance
Border triangles and transforms render quickly. You avoid images and icon fonts, which saves network requests and layout thrash from font swaps. Filters like drop-shadow are fine in small doses; avoid stacking many heavy shadows inside scrolling lists. Hardware-accelerated transforms (translate, rotate, scale) animate smoothly. Prefer opacity and transform transitions for motion. Keep arrow pseudo-elements lightweight, and avoid nesting deep stacking contexts that trigger complex repaint paths.
Point with Purpose
You now have five arrow patterns ready to reuse: a tooltip caret, a speech bubble tail, a dropdown triangle, breadcrumb chevrons, and carousel navigation arrows. Each one relies on consistent variables, pseudo-elements, and the border triangle technique. Extend these ideas to menus, timelines, or callouts across your app, and you will have the tools to build your own icon set powered by CSS.