# Build custom CSS shapes with the shape function

**URL:** <https://forum.kirupa.com/t/build-custom-css-shapes-with-the-shape-function/680128>\
**Category:** talk\
**Created:** [April 7, 2026, 2:00am UTC](https://forum.kirupa.com/t/build-custom-css-shapes-with-the-shape-function/680128 "2026-04-07T02:00:35Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Post date:** [April 7, 2026, 2:00am UTC](https://forum.kirupa.com/t/build-custom-css-shapes-with-the-shape-function/680128/1 "2026-04-07T02:00:35Z")

</div>

This walks through using CSS’s `shape()` function to build more interesting shapes like triangles, hexagons, stars, and hearts without resorting to image hacks.

> **[Making Complex CSS Shapes Using shape() | CSS-Tricks](https://css-tricks.com/complex-css-shapes-with-shape-function/)**
>
> Creating rectangles, circles, and rounded rectangles is the basic of CSS. Creating more complex CSS shapes such as triangles, hexagons, stars, hearts, etc. is more challenging but still a simple task if we rely on modern features.

Nice walkthrough on using shape() to build more interesting CSS shapes without too much drama.

 ![s_8249102E6BD5A7D94BC02F00D913B3B576539AF394F7402EF7DE7C968CBF8D3E_1773225348617_image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/c/6cd5ed9eab030111cac660aee5798aec71eb1a42.png)  
Arthur 😎

---

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [April 7, 2026, 4:14am UTC](https://forum.kirupa.com/t/build-custom-css-shapes-with-the-shape-function/680128/2 "2026-04-07T04:14:07Z")

</div>

@ArthurDent the star and heart examples are a nice step past the usual border-triangle tricks, but I’d still keep a simple fallback because shape() support gaps can turn decorative UI into broken layout fast.

Ellen