Webmasters Gallery

Airlines use advanced UX strategies and dark patterns, such as urgency cues, visual hierarchy, and hidden free options, to nudge travelers toward paying for seat selection, turning it into a $12.4 billion revenue stream.

Matt Mullenweg’s clash with WP Engine highlights the tension between open-source ideals and centralized control within WordPress, which powers 40% of the internet. The controversy raises critical questions about who holds the reins in shaping the web’s future.

Tooltips are like homemade food: everyone uses them and everyone has their own recipe to make them. If you don’t remember a particular recipe, you will search for one, follow it, and go on with your day. This “many ways to do the same thing” concept is general to web development and programming (and life!), but it’s something that especially rings true with tooltips. There isn’t a specialized way to make them — and at this point, it isn’t needed — so people come up with different ways to fill those gaps.

Today, I want to focus on just one step of the recipe, which due to lack of a better name, I’ll just call the little triangle in the tooltip. It’s one of those things that receives minimal attention (admittedly, I didn’t know much before writing this) but it amazes you how many ways there are to make them. Let’s start with the simplest and make our way up to the not-so-simple.

Ideally, the tooltip is just one element. We want to avoid polluting our markup just for that little triangle:

<span class="tooltip">I am a tooltip</span>

Clever border

Before running, we have to learn to walk. And before connecting that little triangle we have to learn to make a triangle. Maybe the most widespread recipe for a triangle is the border trick, one that can be found in Stack Overflow issues from 2010 or even here by Chris in 2016.

In a nutshell, borders meet each other at 45° angles, so if an element has a border but no width and height, the borders will make four perfect triangles. What’s left is to set three border colors to transparent and only one triangle will show! You can find an animated version on this CodePen by Chris Coyier

Usually, our little triangle will be a pseudo-element of the tooltip, so we need to set its dimensions to 0px (which is something ::before and ::after already do) and only set one of the borders to a solid color. We can control the size of the triangle base by making the other borders wider, and the height by making the visible border larger.

.tooltip {
  &::before {
    content: "";

    border-width: var(--triangle-base);
    border-style: solid;
    border-color: transparent;

    border-top: var(--triangle-height) solid red;
  }
}

Attaching the triangle to its tooltip is an art in itself, so I am going with the basics and setting the little triangle’s position to absolute and the .tooltip to relative, then playing with its inset properties to place it where we want. The only thing to notice is that we will have to translate the little triangle to account for its width, -50% if we are setting its position with the left property, and 50% if we are using right.

.tooltip {
  position: relative;

  &::before {
    /* ... */
    position: absolute;
    top: var(--triangle-top);
    left: var(--triangle-left);

    transform: translateX(-50%);
  }
}

However, we could even use the new Anchor Positioning properties for the task. Whichever method you choose, we should now have that little triangle attached to the tooltip:

Rotated square

One drawback from that last example is that we are blocking the border property so that if we need it for something else, we are out of luck. However, there is another old-school method to make that little triangle: we rotate a square by 45° degrees and hide half of it behind the tooltip’s body. This way, only the corner shows in the shape of a triangle. We can make the square out of a pseudo-element:

.tooltip {
  &::before {
    content: "";

    display: block;
    height: var(--triangle-size);
    width: var(--triangle-size);

    background-color: red;
  }
}

Then, position it behind the tooltip’s body. In this case, such that only one-half shows. Since the square is rotated, the transformation will be on both axes.

.tooltip {
  position: relative;

  &::before {
    /* ... */
    position: absolute;
    top: 75%;
    left: 50%;
    z-index: -1; /* So it's behind the tooltip's body */

    transform: translateX(-50%);
    transform: rotate(45deg) translateY(25%) translateX(-50%);
  }
}

I also found that this method works better with Anchor Positioning since we don’t have to change the little triangle’s styles whenever we move it around. Unlike the border method, in which the visible border changes depending on the direction.

Trimming the square with clip-path

Although I didn’t mention it before, you may have noticed some problems with that last approach. First off, it isn’t exactly a triangle, so it isn’t the most bulletproof take; if the tooltip is too short, the square could sneak out on the top, and moving the false triangle to the sides reveals its true square nature. We can solve both issues using the clip-path property.

The clip-path property allows us to select a region of an element to display while clipping the rest. It works by providing the path we want to trim through, and since we want a triangle out of a square, we can use the polygon() function. It takes points in the element and trims through them in straight lines. The points can be written as percentages from the origin (i.e., top-left corner), and in this case, we want to trim through three points 0% 0% (top-left corner), 100% 0% (top-right corner) and 50% 100% (bottom-center point).

So, the clip-path value would be the polygon() function with those three points in a comma-separated list:

.tooltip {
  &::before {
    content: "";

    width: var(--triangle-base);
    height: var(--triangle-height);

    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    transform: translate(-50%);

    background-color: red;
  }
}

This time, we will set the top and left properties using CSS variables, which will come in handy later.

.tooltip {
  position: relative;

  &::before {
    /* ... */
    position: absolute;
    top: var(--triangle-top); /* 100% */
    left: var(--triangle-left); /* 50% */

    transform: translate(-50%);
  }
}

And now we should have a true little triangle attached to the tooltip:

However, if we take the little triangle to the far end of any side, we can still see how it slips out of the tooltip’s body. Luckily, the clip-path property gives us better control of the triangle’s shape. In this case, we can change the points the trim goes through depending on the horizontal position of the little triangle. For the top-left corner, we want its horizontal value to approach 50% when the tooltip’s position approaches 0%, while the top-right corner should approach 50% when the tooltip position approaches 100%.

The following min() + max() combo does exactly that:

.tooltip {
  clip-path: polygon(
    max(50% - var(--triangle-left), 0%) 0,
    min(150% - var(--triangle-left), 100%) 0%,
    50% 100%
  );
}

The calc() function isn’t necessary inside math functions like min() and max().

Try to move the tooltip around and see how its shape changes depending on where it is on the horizontal axis:

Using the border-image property

It may look like our last little triangle is the ultimate triangle. However, imagine a situation where you have already used both pseudo-elements and can’t spare one for the little triangle, or simply put, you want a more elegant way of doing it without any pseudo-elements. The task may seem impossible, but we can use two properties for the job: the already-seen clip-path and the border-image property.

Using the clip-path property, we could trim the shape of a tooltip — with the little triangle included! — directly out of the element. The problem is that the element’s background isn’t big enough to account for the little triangle. However, we can use the border-image property to make an overgrown background. The syntax is a bit complex, so I recommend reading this full dive into border-image by Temani Afif. In short, it allows us to use an image or CSS gradient as the border of an element. In this case, we are making a border as wide as the triangle height and with a solid color.

.tooltip {
  border-image: fill 0 // var(--triangle-height) conic-gradient(red 0 0);;
}

The trim this time will be a little more complex, since we will also trim the little triangle, so more points are needed. Exactly, the following seven points:

This translates to the following clip-path value:

.tooltip {
  /* ... */
  clip-path: polygon(
    0% 100%,
    0% 0%,
    100% 0%,
    100% 100%,
    calc(50% + var(--triangle-base) / 2) 100%,
    50% calc(100% + var(--triangle-height)),
    calc(50% - var(--triangle-base) / 2) 100%
  );
}

We can turn it smart by also capping the little triangle bottom point whenever it gets past any side of the tooltip:

.tooltip {
  /* ... */
  clip-path: polygon(
    0% 100%,
    0% 0%,
    100% 0%,
    100% 100%,
    min(var(--triangle-left) + var(--triangle-base) / 2, 100%) 100%,
    var(--triangle-left) calc(100% + var(--triangle-height)),
    max(var(--triangle-left) - var(--triangle-base) / 2, 0%) 100%
  ;
}

And now we have our final little triangle of the tooltip, one that is part of the main body and only uses one element!

More information

• The Complex But Awesome CSS border-image Property (Temani Afif)
• Transforming Borders into Cool CSS Triangles (Optimistic Web)

Related tricks!

---

The Little Triangle in the Tooltip originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Google’s Project Mariner introduces autonomous AI agents that navigate the web and perform tasks, reshaping UX design and testing to accommodate both human users and AI agents.

Git Wrapped is a free tool that transforms your GitHub activity into an engaging, shareable year-in-review summary, highlighting your top projects, language usage, and commit trends.

2024 has been a great year for type design. Over the past few years geometric sans have been less apparent, with cursive and serifs having something of a renaissance; that trend continued this year. There’s been a very clear fashion for French design. Experimental fonts are more usable than ever. Here — in no particular […]

Big brands are increasingly ditching serif fonts in their logos, opting for sleek sans-serif designs to stay modern, improve digital readability, and appeal to younger, tech-savvy audiences.

Sandisk Corporation—synonymous with flash drives, memory cards, and digital storage—has redefined its visual identity with a bold, minimalist new logo. The inspiration? A single pixel.

“It all started with the pixel, which is the fundamental smallest unit of data,” explains Andre Filip, CEO of ELA Advertising, the agency behind the redesign.

Sandisk worked on the new look ahead of its highly anticipated spin-off from parent company Western Digital planned for next year.

The Logo: A Modernized Minimalism

The updated design is sleek, futuristic, and packed with symbolism. Sandisk’s recognizable open ‘D’ remains, but the standout feature is the revamped ‘S’: a pared-down form shaped into a cone and a square pixel.

“It’s the first letter; it’s like the cornerstone of the company,” says Joel Davis, Sandisk’s Vice President of Creative. If the pixel seems NASA-inspired, it’s no accident. “We actually asked ourselves, ‘What would this look like on a spaceship?’” Davis reveals.

Sandisk now boasts two versions of its logo—vertical and horizontal—ensuring flexibility across digital and physical branding.

A Legacy Redefined

Founded as SunDisk in 1988 and renamed in 1995, Sandisk has seen decades of technological evolution. Western Digital acquired the company in 2016 for a staggering $15.59 billion, but as part of an upcoming business split, Sandisk’s flash storage division will emerge as its own entity.

The logo redesign marks a pivotal moment in Sandisk’s story.

Why Should Designers Care?

Sandisk’s rebrand shows that even practical, hardware-focused companies can embrace storytelling and emotional impact. This isn’t just about storage devices; it’s about empowering progress for creators, businesses, and individuals.

For designers, the lesson is clear: a logo is just one part of a larger narrative. Sandisk’s redesign proves that minimalism can still feel dynamic and alive, while delivering a scalable, timeless identity that sets a new benchmark for tech brands.

A One-Shot Opportunity

For the team behind the new design, this wasn’t just another update—it was a statement. “The brand has been around since the late ’80s,” Davis says, “and while it’s a great logo, we really had this one opportunity to bring the company into the future.”

And the future, it seems, begins with a single pixel.

Behind the Design: Sandisk’s New Brand

Every year, the UX Collective dives deep into what’s shaping the design world, and their 2025 State of UX report is out.

Spoiler alert: it’s a mix of exciting tech breakthroughs and some hard truths about where our industry is headed. If you’re wondering how AI, design tools, and shifting priorities are changing the game, here’s what you need to know.

The Great Design Handoff: Humans vs. Algorithms?

Design is no longer just about sketching out wireframes or crafting pixel-perfect mockups. A massive shift is happening: control is moving from designers to algorithms, automated tools, and, yes, business stakeholders.

Tools like Figma and Canva are doing more than just speeding things up—they’re changing how we define “designing.”

As AI-powered tools get smarter, they’re taking over tasks like creating layouts or optimizing experiences. While this frees us up for more creative work, it also begs the question: are we okay with giving up some of the artistry in favor of efficiency?

Clicks Over Clarity: The Business of UX

Let’s talk about something uncomfortable: UX is becoming less about the “user” and more about hitting business KPIs. Growth teams are using design systems to focus on maximizing engagement—clicks, sign-ups, conversions. Sounds great on paper, right? But at what cost?

The report warns that this metric-driven approach risks turning UX into a numbers game, where clarity and user satisfaction take a backseat. Ever felt frustrated by an endless pop-up or confusing navigation? Yep, that’s what happens when growth trumps good design.

AI: Friend, Foe, or Frenemy?

AI is everywhere, and it’s rewriting the rules of UX. Personalization is becoming hyper-specific, automated A/B tests are a breeze, and data-driven decisions are ruling the roost. But here’s the flip side: the more we rely on AI, the less room there is for human intuition and empathy.

The report urges us to keep a balance. Sure, let AI handle the grunt work, but let’s not forget the importance of crafting designs that feel genuinely human. Machines might know what works, but they don’t understand why it works—or how it makes someone feel.

What This Means for Designers

So, where does all of this leave us as designers? The report encourages us to adapt—and fast. Want to stay ahead? Think beyond the pixels. Lean into strategy, leadership, user psychology, and accessibility.

There’s also a big push to double down on creativity. While AI might be able to generate layouts, it can’t replace the depth of storytelling or the finesse of thoughtful design. This is where we can shine.

Looking Ahead

The 2025 UX landscape is challenging us to redefine what it means to be a designer. Whether it’s embracing new tools, fighting for user-centric principles, or stepping into leadership roles, there’s plenty of opportunity to grow.

The big takeaway? Designers still matter—maybe now more than ever. But we have to evolve, stay curious, and never lose sight of what makes our work impactful: designing for people, not just metrics.

Go to The State of UX in 2025