CSS Image Shapes

Popular Image Shapes

img {
    border-radius: 50%;
}

img {
    transform: rotate(45deg);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

img {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

img {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

🔹 Circular Images

Circular image styling is achieved through CSS border-radius and object-fit properties for perfect visual presentation. Setting border-radius: 50% creates perfect circles from square containers, while combining it with object-fit: cover ensures images fill the circular frame without distortion. This technique is essential for profile pictures, avatars, and product displays where visual consistency matters. For responsive designs, using percentage-based measurements ensures circular elements maintain proportions across screen sizes. Additional enhancements include adding borders, shadows, and hover animations to create engaging interactive elements that improve user experience and visual appeal.

/* Basic circle */
.circle-basic {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

/* Circle with border */
.circle-border {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #007cba;
    object-fit: cover;
}

/* Circle with shadow */
.circle-shadow {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

<div style="display: flex; gap: 20px; align-items: center;">
    <img src="/placeholder.png" 
         alt="Basic Circle" 
         class="circle-basic">
    <img src="/placeholder.png" 
         alt="Circle Border" 
         class="circle-border">
    <img src="/placeholder.png" 
         alt="Circle Shadow" 
         class="circle-shadow">
</div>

Output:

🔹 Polygon Shapes with Clip-Path

CSS clip-path creates complex polygon shapes beyond basic rectangles and circles for innovative web design. Using the clip-path: polygon() function, developers can define custom shapes with multiple coordinate points, such as triangles, hexagons, or irregular polygons. This technique enables creative layouts without image assets, improving performance and accessibility. For example, clip-path: polygon(50% 0%, 100% 100%, 0% 100%) creates a perfect downward-facing triangle. These shapes can be animated, responsive, and interactive, supporting modern design trends like geometric backgrounds, shaped image containers, and dynamic content reveals with smooth transitions.

/* Triangle */
.triangle-shape {
    width: 150px;
    height: 150px;
    object-fit: cover;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Diamond */
.diamond-shape {
    width: 150px;
    height: 150px;
    object-fit: cover;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Hexagon */
.hexagon-shape {
    width: 150px;
    height: 150px;
    object-fit: cover;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Pentagon */
.pentagon-shape {
    width: 150px;
    height: 150px;
    object-fit: cover;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; justify-items: center;">
    <img src="/placeholder.png" 
         alt="Triangle" 
         class="triangle-shape">
    <img src="/placeholder.png" 
         alt="Diamond" 
         class="diamond-shape">
    <img src="/placeholder.png"  
         alt="Hexagon" 
         class="hexagon-shape">
    <img src="/placeholder.png"  
         alt="Pentagon" 
         class="pentagon-shape">
</div>

Output:

🔹 Creative Shape Combinations

Creative shape combinations integrate multiple CSS properties to produce visually striking design elements. By combining clip-path with box-shadow, gradient backgrounds, and CSS transforms, developers create complex visual effects that enhance user interface engagement. These combinations enable distinctive branding elements, decorative accents, and interactive components that stand out from conventional rectangular designs. Practical applications include uniquely shaped buttons, decorative section dividers, and animated background patterns. The performance benefits of CSS-based shapes versus image-based alternatives include faster loading, perfect scalability across screen resolutions, and easier maintenance through code-based adjustments.

/* Animated hexagon with border */
.animated-hexagon {
    width: 140px;
    height: 140px;
    object-fit: cover;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    border: 3px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(45deg, #ff6b6b, #4ecdc4) border-box;
    transition: transform 0.3s ease;
}

.animated-hexagon:hover {
    transform: scale(1.1) rotate(10deg);
}

/* Star shape */
.star-shape {
    width: 120px;
    height: 120px;
    object-fit: cover;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Heart shape (approximate) */
.heart-shape {
    width: 120px;
    height: 120px;
    object-fit: cover;
    clip-path: path('M12,21.35l-1.45-1.32C5.4,15.36,2,12.28,2,8.5 C2,5.42,4.42,3,7.5,3c1.74,0,3.41,0.81,4.5,2.09C13.09,3.81,14.76,3,16.5,3 C19.58,3,22,5.42,22,8.5c0,3.78-3.4,6.86-8.55,11.54L12,21.35z');
    transform: scale(5);
}

<div style="display: flex; gap: 30px; align-items: center; justify-content: center;">
    <img src="/placeholder.png" 
         alt="Animated Hexagon" 
         class="animated-hexagon">
    <img src="/placeholder.png" 
         alt="Star" 
         class="star-shape">
</div>

Output:

🔹 Rounded Rectangle Variations

Rounded rectangle variations provide subtle yet impactful design enhancements through controlled border-radius values. Beyond uniform rounding, developers can target individual corners using properties like border-top-left-radius or shorthand notation: border-radius: 10px 20px 30px 40px. This creates pill-shaped buttons, softened card corners, and organic container shapes that improve visual flow. Advanced techniques include using percentage-based values for elliptical corners and combining different radius values with background gradients for depth effects. These variations are crucial for modern interface design, contributing to visual hierarchy, user focus direction, and overall aesthetic appeal across different device screens.

/* Slightly rounded */
.rounded-small {
    border-radius: 8px;
}

/* Medium rounded */
.rounded-medium {
    border-radius: 20px;
}

/* Pill shape */
.pill-shape {
    border-radius: 50px;
}

/* Asymmetric rounded */
.rounded-asymmetric {
    border-radius: 20px 5px 20px 5px;
}

/* Organic shape */
.organic-shape {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;">
    <img src="/placeholder.png" 
         alt="Small Rounded" 
         class="rounded-small">
    <img src="/placeholder.png"  
         alt="Pill Shape" 
         class="pill-shape">
    <img src="/placeholder.png"  
         alt="Organic Shape" 
         class="organic-shape">
</div>

Output: