Your interface already has a hierarchy, but the scan path is often random. Shapes can act as cues that pull attention in a predictable sequence. In this tutorial you will build a compact landing layout where triangles point users through a feature list, a circular halo spotlights the headline, and a ribbon labels the call to action. You will learn how each shape works and how to combine them so the eye flows from message to message with intent.
Why Using Shapes to Guide the User’s Eye Matters
Eye-tracking research shows that corners, directional edges, and enclosed regions stand out at a glance. Arrows nudge attention forward. Circles create focal anchors around important text. Ribbons and banners establish labels that separate content from background noise. When you craft these cues with pure CSS, you keep the UI sharp at any resolution, ship zero image bytes, and tune styles with variables. You gain control over rhythm and emphasis without extra assets or layout complexity.
Prerequisites
We will build everything with semantic HTML and modern CSS. A small set of techniques goes a long way, and you can lift pieces of this layout into any project.
- Basic HTML
- CSS custom properties
- CSS pseudo-elements (::before / ::after)
Step 1: The HTML Structure
This structure contains three zones: a hero with a circular halo behind the headlining phrase, a feature list where each card gets a pointer, and a call-to-action section with a ribbon label and an arrow in the button. The halo and pointers are decorative, so they receive aria-hidden to keep screen readers focused on the text.
<div class="demo">
<header class="hero">
<span class="hero-halo" aria-hidden="true"></span>
<h1 class="hero-title">
<span class="hero-highlight">Design that directs</span>
</h1>
<p class="hero-sub">Guide attention with subtle, purpose-built shape cues.</p>
</header>
<section class="features" aria-label="Highlights">
<article class="feature">
<h2 class="feature-title">Onboarding that points the way</h2>
<p>Use directional pointers to lead users from step to step without extra copy.</p>
</article>
<article class="feature">
<h2 class="feature-title">Focus on the key action</h2>
<p>A circular halo frames the primary message and keeps the eye on it.</p>
</article>
<article class="feature">
<h2 class="feature-title">Labels that stand out</h2>
<p>A ribbon banner separates promotions from body content without clutter.</p>
</article>
</section>
<section class="cta" aria-label="Call to action">
<div class="ribbon" aria-hidden="true">New</div>
<h2 class="cta-title">Start your free trial</h2>
<a class="cta-button" href="#start">
<span class="cta-label">Get started</span>
<span class="cta-pointer" aria-hidden="true"></span>
</a>
</section>
</div>
Step 2: The Basic CSS & Styling
Set up a fluid layout, color variables, and stack spacing. The hero uses a quiet background so the halo glow reads cleanly. Features sit on a card grid that scales from mobile to desktop. The CTA block gets a strong accent color that stands apart from the rest of the page.
/* CSS */
:root {
--bg: #0f1220;
--surface: #171a2b;
--card: #1e2238;
--text: #e9edf5;
--muted: #b7bed1;
--accent: #5ee1a4;
--accent-deep: #30c78b;
--danger: #ff5678;
--halo: rgba(94, 225, 164, 0.18);
--radius: 14px;
--gap: 1rem;
--pad: 1.25rem;
}
*,
*::before,
*::after { box-sizing: border-box; }
html, body {
height: 100%;
}
body {
margin: 0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
background: radial-gradient(1200px 600px at 20% 0%, #161a2e 0%, var(--bg) 60%);
color: var(--text);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.demo {
width: min(1050px, 92vw);
margin: 6vh auto 12vh;
display: grid;
gap: calc(var(--gap) * 2);
}
.hero {
position: relative;
padding: clamp(2rem, 4vw, 3rem);
border-radius: var(--radius);
background: linear-gradient(180deg, var(--surface), #13172a);
overflow: hidden;
}
.hero-title {
margin: 0 0 .25rem 0;
font-size: clamp(1.8rem, 4.5vw, 3rem);
letter-spacing: -0.01em;
}
.hero-sub {
margin: 0;
color: var(--muted);
}
.features {
display: grid;
gap: var(--gap);
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.feature {
position: relative;
background: var(--card);
border-radius: var(--radius);
padding: calc(var(--pad) + .25rem) calc(var(--pad) + .25rem) calc(var(--pad) + .75rem) calc(var(--pad) + 2.5rem);
box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 20px 40px rgba(0,0,0,0.35);
min-height: 140px;
}
.feature-title {
margin: 0 0 .25rem 0;
font-size: 1.05rem;
}
.cta {
position: relative;
background: linear-gradient(180deg, var(--accent-deep), #2ba877);
border-radius: var(--radius);
padding: calc(var(--pad) * 1.6);
color: #032216;
overflow: hidden;
isolation: isolate;
}
.cta-title {
margin: 0 0 .75rem 0;
font-size: clamp(1.2rem, 3.4vw, 1.8rem);
}
.cta-button {
display: inline-flex;
align-items: center;
gap: .75rem;
background: #05281a;
color: #c8ffe8;
border-radius: 999px;
padding: .7rem 1rem .7rem 1.1rem;
text-decoration: none;
font-weight: 600;
box-shadow: inset 0 0 0 1px rgba(200,255,232,0.25), 0 8px 20px rgba(0,0,0,0.25);
transform: translateZ(0);
}
Advanced Tip: Keep shape sizing and colors in custom properties. You can retheme the page, scale pointers for dense layouts, or swap the halo tint for seasonal campaigns with one edit in :root.
Step 3: Building the Directional Feature Pointers
Each feature card uses a left-edge triangle that points toward the title. The pointer sits outside the text block so the angle remains crisp and does not crowd the copy. The triangle is a single pseudo-element built from borders, which means no extra markup.
/* CSS */
/* Feature pointer triangles */
.feature::before {
content: "";
position: absolute;
left: .9rem;
top: 1.15rem;
width: 0;
height: 0;
border-top: .45rem solid transparent;
border-bottom: .45rem solid transparent;
border-left: .65rem solid var(--accent);
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.25));
}
/* Gentle guide line that the eye can follow */
.feature::after {
content: "";
position: absolute;
left: calc(.9rem + .65rem + .25rem);
top: 1.4rem;
width: 38%;
height: 2px;
background: linear-gradient(90deg, rgba(94,225,164,0.5), rgba(94,225,164,0));
pointer-events: none;
}
How This Works (Code Breakdown)
The triangle uses a classic CSS borders trick. Setting width and height to zero removes the box and leaves only the border edges. With two transparent borders on top and bottom and a colored border on the left, the visible shape becomes a right-pointing triangle. If you want a deeper refresher or alternate sizes, see the reference on how to make a triangle right with CSS at how to make a triangle right with CSS.
Position absolute lets the triangle sit outside the text’s flow and stay anchored regardless of copy length. The top offset aligns the pointer with the first line of the heading so the arrow reads as an entry cue. A small drop-shadow adds separation from the card background so the triangle does not blend during motion or when the user scrolls quickly.
The guide line is a 2px gradient bar placed to the right of the triangle tip. It fades toward the end so the user’s attention transfers naturally into the heading without a hard stop. Because the line is decorative and does not affect action, pointer-events remains none to keep clicks on the card itself.
Step 4: Building the Halo and the CTA Ribbon
The hero halo creates a soft circular focus behind the key phrase. The CTA ribbon frames a short “New” label, and the button includes a small arrow to direct the click. These shapes work together: the eye lands on the halo, scans down through features, and ends on the CTA that carries a clear directional affordance.
/* CSS */
/* Hero halo circle behind the headline */
.hero-halo {
position: absolute;
inset: 0;
margin: auto;
width: clamp(240px, 46vw, 460px);
height: clamp(240px, 46vw, 460px);
border-radius: 50%;
background: radial-gradient(circle, var(--halo) 0%, rgba(94,225,164,0.06) 55%, transparent 65%);
translate: -26% -20%;
z-index: 0;
}
/* Lift the text in front of the halo */
.hero-title,
.hero-sub {
position: relative;
z-index: 1;
}
.hero-highlight {
background: linear-gradient(90deg, #c2ffe6, #8cf6c8);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* CTA ribbon label (decorative) */
.ribbon {
position: absolute;
top: 1rem;
right: -1.2rem;
background: #ffe8ed;
color: #8e1f35;
padding: .35rem .9rem .35rem 1rem;
font-weight: 700;
border-radius: 4px;
transform: rotate(10deg);
box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}
/* Little ribbon tail using a triangle notch */
.ribbon::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 0;
height: 0;
border-left: 8px solid #cbbac0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
filter: brightness(.95);
}
/* CTA button arrow pointer */
.cta-pointer {
width: 0;
height: 0;
border-top: .35rem solid transparent;
border-bottom: .35rem solid transparent;
border-left: .55rem solid var(--accent);
transition: transform .25s ease, border-left-color .25s ease;
}
.cta-button:hover .cta-pointer {
transform: translateX(2px);
border-left-color: #a5ffd9;
}
How This Works (Code Breakdown)
The halo is a circle created with border-radius: 50% and a radial-gradient that fades from a soft green to transparent. The size scales with clamp so the shape stays prominent on large screens without overwhelming small ones. The translate offsets the center so the brightest region sits behind the phrase rather than dead-center. For more circle techniques and sizing patterns, review how to make a circle with CSS.
The ribbon is a small rectangle rotated a bit to feel like a physical tag. The notch is a triangle built with borders on the ::after pseudo-element, which gives the banner a folded tail. If you plan a larger banner that spans a card or a hero, the guide at how to make a ribbon banner with CSS covers full-width variations and shadow styles.
The CTA arrow uses the same border triangle approach as the feature pointers, sized down to sit inside a pill button. The hover offset adds movement that signals affordance without changing layout, since transform runs on the compositor. Reusing the triangle method yields a consistent visual language across the page.
Advanced Techniques: Adding Animations & Hover Effects
Motion draws attention, so use it to reinforce flow. Keep it brief, limit the range, and honor user preferences. The halo can breathe with a subtle scale and opacity cycle, and the CTA arrow can nudge to imply forward progress. Both effects must be lightweight and easy to pause.
/* CSS */
/* Halo pulse and CTA arrow nudge */
@keyframes halo-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.03); opacity: .92; }
}
.hero-halo {
animation: halo-pulse 6s ease-in-out infinite;
will-change: transform, opacity;
}
.cta-button:hover .cta-pointer {
transform: translateX(4px);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.hero-halo { animation: none; }
.cta-button:hover .cta-pointer { transform: none; }
.cta-pointer { transition: none; }
}
Accessibility & Performance
Shapes are visual aids. Treat them as decoration unless they carry meaning that screen readers must announce. The text and interactive elements should carry the message on their own. Any motion should draw the eye, not distract it, and it should stop when the user asks for reduced motion.
Accessibility
Mark decorative shapes with aria-hidden=”true” so they do not add noise. The ribbon reads as a visual tag only, so it remains hidden from assistive tech. The CTA is a real link with text that states the action. Make sure color contrast meets WCAG; the hero gradient supports readable text by keeping a dark base behind it. For motion, respect prefers-reduced-motion and provide a no-animation path that still shows meaning, as the code does above. If a triangle or arrow communicates a state change, mirror that meaning in text, such as “Next step” in the button label.
Performance
Pure CSS triangles and circles render fast because they rely on borders, simple gradients, and border-radius. Transforms and opacity animate on the compositor and do not trigger layout or paint on each frame. Avoid large layered shadows in animations because they can push the browser to repaint more often. Group shape sizes and colors in variables so the cascade resolves once and styles remain consistent. Keep pseudo-elements to the minimum: one triangle and one line per card is a good ceiling for mobile lists with many items.
Shape the Scan Path, Not Just the Layout
You built a layout that uses triangles to point toward content, a circular halo to frame the headline, and a ribbon that labels the final action. The eye moves from focal area to guidance cues and ends on a clear invitation to click. You now have a compact toolkit to shape attention with code, ready to expand across product tours, pricing pages, and dashboards.