Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
css shapes

9 Articles
{
,

}
Direct link to the article Creating CSS Shapes with Emoji
css shapes emoji

Creating CSS Shapes with Emoji

CSS Shapes is a standard that lets us create geometric shapes over floated elements that cause the inline contents — usually text — around those elements to wrap along the specified shapes.

Such a shaped flow of text looks good …

Avatar of Preethi
Preethi on Oct 23, 2020
Direct link to the article CSS in 3D: Learning to Think in Cubes Instead of Boxes
3d animation css shapes perspective

CSS in 3D: Learning to Think in Cubes Instead of Boxes

My path to learning CSS was a little unorthodox. I didn’t start as a front-end developer. I was a Java developer. In fact, my earliest recollections of CSS were picking colors for things in Visual Studio.

It wasn’t until later …

Avatar of Jhey Tompkins
Jhey Tompkins on Oct 23, 2020
Direct link to the article Advice for Complex CSS Illustrations
art css shapes

Advice for Complex CSS Illustrations

If you were to ask me what question I hear most about front-end development, I’d say it’s“How do I get better at CSS?”. That question usually comes up after sharing a CSS illustration I have made. It’s something I …

Avatar of Jhey Tompkins
Jhey Tompkins on Jun 17, 2020 (Updated on Jun 20, 2020)
Direct link to the article css.gg
css shapes icons

css.gg

Direct Link

I’m not sure what to call these icons from Astrit Malsija. The title is “500+ CSS Icons, Customizable, Retina Ready & API” and the URL is “css.gg” but they aren’t really named anything.

Anyway, their shtick is:

The 🌎’s first

…
Avatar of Chris Coyier
Shared by Chris Coyier on Dec 18, 2019
Direct link to the article Pac-Man… in CSS!
clip-path css animation css shapes

Pac-Man… in CSS!

You all know famous Pac-Man video game, right? The game is fun and building an animated Pac-Man character in HTML and CSS is just as fun! I’ll show you how to create one while leveraging the powers of the …

Avatar of Maks Akymenko
Maks Akymenko on Nov 11, 2019
Direct link to the article The Many Ways to Link Up Shapes and Images with HTML and CSS
clip-path css shapes links SVG

The Many Ways to Link Up Shapes and Images with HTML and CSS

Different website designs often call for a shape other than a square or rectangle to respond to a click event. Perhaps your site has some kind of tilted or curved banner where the click area would be awkwardly large as …

Avatar of Bailey Jones
Bailey Jones on Oct 1, 2019 (Updated on Oct 10, 2019)
Direct link to the article Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!
css shapes navigation SVG

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons

Let’s have a look at how we can create a row of links that sorta run into each other with a chevron-like shape and notch on each block like you might …

Avatar of Silvestar Bistrović
Silvestar Bistrović on Apr 29, 2019 (Updated on May 3, 2019)
Direct link to the article CSS Triangles, Multiple Ways
clip-path css shapes glyphs SVG triangle

CSS Triangles, Multiple Ways

Direct Link

I like Adam Laki’s Quick Tip: CSS Triangles because it covers that ubiquitous fact about front-end techniques: there are always many ways to do the same thing. In this case, drawing a triangle can be done:

  • with border and a
…
Avatar of Chris Coyier
Shared by Chris Coyier on Mar 4, 2019
Direct link to the article A CSS Venn Diagram
charts css shapes grid shape-outside

A CSS Venn Diagram

Direct Link

This is pretty wild: Adrian Roselli has made a series of rather complex Venn diagrams using nothing but CSS. With a combination of the Firefox dev inspector, plus a mixture of CSS Grid and the shape-outside property, it’s possible to …

Avatar of Robin Rendle
Shared by Robin Rendle on Dec 17, 2018
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top