How can I create a custom polygon shape in Webflow and make it display properly with text inside?
TL;DR
- Use a CSS clip-path on a Div for simple shapes and center text inside using flexbox and padding.
- For complex or responsive designs, embed an inline SVG with polygon and text elements, ensuring viewBox and scaling are set correctly.
To create a custom polygon shape in Webflow and place text inside it, follow these steps using either CSS clip-path or SVG. Each method has specific advantages depending on your design and responsiveness needs.
---
1. Use a CSS clip-path for Basic Polygon Shapes
- Add a Div Block to your Webflow canvas where you want the polygon shape.
- Go to the Style panel and set dimensions (e.g., Width: 300px, Height: 300px).
- Set a background color so the shape is visible.
- Under Custom CSS in the Page or Embed, apply a
clip-pathvalue to that class: - Example:
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);(this creates a diamond).
Important: Webflow does not support clip-path directly in the Designer UI, so using a Custom Code Embed or Page Settings > Custom Code is required.
---
2. Add Text Inside the Polygon
- Nest a Text Block or Heading inside the polygon Div.
- To ensure text stays within, apply these styles:
- Display: flex
- Align: center
- Justify: center
- Text align: center
- Add padding to avoid text overflowing clipped edges.
- Be aware: Text will not wrap along polygon lines—it will treat the shape as a rectangle.
---
3. Use an SVG Polygon for Complex Shapes
- Create an SVG file with a polygon shape using a tool like Figma or a code editor.
- Use Webflow’s Embed element, then paste inline SVG code.
- Example (simplified):
<svg viewBox="0 0 200 200"><polygon points="100,0 200,100 100,200 0,100" fill="#F00"/><text x="100" y="110" text-anchor="middle" fill="#FFF" font-size="16">Text</text></svg> - Ensure the viewBox is set correctly and text is centered inside the polygon.
- SVG provides more design control, including scalable shapes and stylable text.
---
4. Make the Polygon Responsive
- For CSS clip-path, use percentages in the polygon points.
- For SVG, set the
viewBoxand use width: 100% and height: auto on the SVG element.
---
Summary
To create a custom polygon with readable text inside in Webflow:
- Use CSS
clip-pathin a Div for simple shapes and embed text inside using flexbox. - For more control and better responsiveness, use an inline SVG with a polygon and <text> element.
- Note that text flow will remain rectangular, even within a non-rectangular shape.