Shape Outside - Polygon

Developer
Stacy
Size
3,954 Kb
Views
18,207
  1. Shape Outside - Polygon Previews
  2. Shape Outside - Polygon HTML Codes
  3. Shape Outside - Polygon CSS Codes
  4. Shape Outside - Polygon JS Codes

How do I make an shape outside - polygon?

Demo of shape-outside: polygon();To view shape-outside with clip-path check out https://codepen.io/stacy/pen/aWKerN/. What is a shape outside - polygon? How do you make a shape outside - polygon? This script and codes were developed by Stacy on 24 September 2022, Saturday.

Shape Outside - Polygon Previews
IQ Test

Shape Outside - Polygon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shape Outside - Polygon</title> <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/mbrpdm.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main>	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/150150/yoga.png">	<p class="title">Shape Outside Demo <span>polygon</span>
</p>	<p class="intro">The following are a few of my favorite excerpts from the 2005 Stanford University commencement speech given by Steve Jobs.</p>	<p class="first">“No one wants to die. Even people who want to go to heaven don't want to die to get there. And yet death is the destination we all share. No one has ever escaped it. And that is as it should be, because Death is very likely the single best invention of Life. It is Life's change agent. It clears out the old to make way for the new. Right now the new is you, but someday not too long from now, you will gradually become the old and be cleared away. Sorry to be so dramatic, but it is quite true.</p>	<p>Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma — which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.</p>	<p>Stay Hungry. Stay Foolish.”</p>
</main> <script src="js/index.js"></script>
</body>
</html>

Shape Outside - Polygon - Script Codes CSS Codes

img { float: left; height: 600px; width: 600px; -webkit-shape-outside: polygon(24.55% -23.75%, 34.55% -23.6%, 64.05% 5%, 64.05% 5%, 64.2% 27.2%, 70.15% 35.8%, 69.05% 42.65%, 57.5% 46.25%, 60.45% 54.85%, 61.1% 62.5%, 55.15% 66.25%, 55.8% 92.65%, 24.05% 92.65%); shape-outside: polygon(24.55% -23.75%, 34.55% -23.6%, 64.05% 5%, 64.05% 5%, 64.2% 27.2%, 70.15% 35.8%, 69.05% 42.65%, 57.5% 46.25%, 60.45% 54.85%, 61.1% 62.5%, 55.15% 66.25%, 55.8% 92.65%, 24.05% 92.65%);
}
body { background-color: #00001a; color: #fff; font-family: "Libre Baskerville", serif; line-height: 1.7; position: relative; width: 100%;
}
main,
.title { margin: 0 auto; max-width: 60rem;
}
.title { font-size: 2.5rem; font-weight: 700; line-height: 1.1; margin: 0 0 .5rem 0; padding: 3.5rem 0 0;
}
.title span { color: #cfedfc; font-size: 2rem; font-style: italic; font-weight: 400; line-height: 1.2; margin: 0;
}
@supports ((-webkit-shape-outside: circle()) or (shape-outside: circle())) { .title { padding: 2.0rem 0 0; }
}
.intro { color: #cc9966; font-style: italic; font-size: 1.15rem; text-shadow: 1px 1px 1px #333;
}
p { font-size: .9rem; margin: 0; padding-top: 1.5rem;
}
.first { padding-top: 2rem;
}
img { padding: 1.25rem;
}

Shape Outside - Polygon - Script Codes JS Codes

// To see with clip-path, view:
// https://codepen.io/stacy/pen/aWKerN/
Shape Outside - Polygon - Script Codes
Shape Outside - Polygon - Script Codes
Home Page Home
Developer Stacy
Username stacy
Uploaded September 24, 2022
Rating 4
Size 3,954 Kb
Views 18,207
Do you need developer help for Shape Outside - Polygon?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Stacy (stacy) Script Codes
Name
Super Moon - Shape Outside
CSS Grid Layout with float and flexbox fallbacks
Spring Color Palette
Knockout Text with CSS Blend Modes
CSS Background Blend Modes
CSS Grid Layout - New Terminology
Color Palette sample in a simple style guide template
CSS Grid Layout - responsive gallery demo
CSS Grid Layout Demo 5 - Grid Gap
Shape Outside - Ellipse
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!