Wrapping Content around images using CSS Shapes

Getting Started with CSS Shapes

But Nick, can’t I just use a transparent background .PNG image?

Clip-Path

Shape-Outside

Examples:

Circle()

Before

.basketball {
width: 40%;
float: right;
background: red;
padding: 30px;
}

Just using shape-outside

.basketball {
width: 40%;
float: right;
background: red;
padding: 30px;
shape-outside: circle();
}

After: shape-outside + clip-path

.basketball {
width: 40%;
float: right;
background: red;
padding: 30px;
clip-path: circle();
shape-outside: circle();
}

Ellipse()

Before

.coffee--left {
width: 65%;
float: left;
background: green;
}

Just using clip-path

.coffee-left {
width: 65%;
float: left;
background: green;
clip-path: ellipse();
}

After: shape-outside + clip-path

.coffee-left {
width: 65%;
float: left;
clip-path: ellipse();
shape-outside: ellipse();
}

Polygon()

clip-path: polygon(0% 0%, 70% 0%, 70% 25%, 100% 55%, 100% 100%, 0% 100%);
shape-outside: polygon(0% 0%, 70% 0%, 70% 25%, 100% 55%, 100% 100%, 0% 100%);
.wine — left {
float: left;
clip-path: polygon(0% 0%, 70% 0%, 70% 25%, 100% 55%, 100% 100%, 0% 100%);
shape-outside: polygon(0% 0%, 70% 0%, 70% 25%, 100% 55%, 100% 100%, 0% 100%);
}
.wine — right {
float: right;
clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%, 25% 25%);
shape-outside: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%, 25% 25%);
}

Before

.myMinion {
width: 60%;
float: right;
background: orange;
}

After

.myMinion {
width: 60%;
float: right;
background: orange;
clip-path: polygon(29% 10%, 61% 0%, 72% 10%, 74% 33%, 94% 28%, 92% 48%, 86% 47%, 75% 56%, 65% 93%, 52% 93%, 52% 86%, 38% 87%, 25% 89%, 17% 76%, 25% 67%, 28% 53%, 10% 30%, 24% 24%);
shape-outside: polygon(29% 10%, 61% 0%, 72% 10%, 74% 33%, 94% 28%, 92% 48%, 86% 47%, 75% 56%, 65% 93%, 52% 93%, 52% 86%, 38% 87%, 25% 89%, 17% 76%, 25% 67%, 28% 53%, 10% 30%, 24% 24%);
}

--

--

--

Front End Developer | @hackeryou student | Salsa Dancer | Basketball fanatic | I smile a lot

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is a Pantone Colour and do I need it for my printing?

“This is great!” – the citizens’ verdict

Our New Identity

Your portfolio isn't as good as you think

We always find our Type -Design Culture at MICA

Mind Reading Magic

How-To Guide — ADU Planning & Construction Process

Envirosound: Combing Travel with the Power of Storytelling

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nicholas Evans

Nicholas Evans

Front End Developer | @hackeryou student | Salsa Dancer | Basketball fanatic | I smile a lot

More from Medium

How to add a Global Navigation Bar to Your Site the Easy Way.

Using Just 2 CSS Class Display Text On Bootsratp 5 Card When Hover

Our Experience Learning Frontend Web development (HTML, CSS, Tailwind and JavaScript) in Side…

Cool CSS Features: Animation with Variable Font