Shape Outside - Polygon
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 - 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/
Developer | Stacy |
Username | stacy |
Uploaded | September 24, 2022 |
Rating | 4 |
Size | 3,954 Kb |
Views | 18,216 |
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!
Name | Size |
Shape Outside - Ellipse | 3,568 Kb |
Display Breakpoints on the front end for faster Sass Media Query editing | 3,383 Kb |
Breakpoint Sass Demo - Even better nested media queries | 3,466 Kb |
Super Moon - Shape Outside | 3,577 Kb |
CSS Grid Layout Demo 5 - Grid Gap | 4,833 Kb |
Knockout Text with CSS Blend Modes | 3,382 Kb |
Using Sass Maps to build a color palette | 3,715 Kb |
CSS Filters | 3,506 Kb |
CSS Grid Layout with float and flexbox fallbacks | 5,665 Kb |
CSS Grid Layout - responsive gallery demo | 4,241 Kb |
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!
Name | Username | Size |
Animate elements with fixed gradient | Badabam | 4,406 Kb |
Wikipedia Viewer | Thalpha | 4,426 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
Savemedia1.1 | EdsonAlcala | 2,148 Kb |
Tree growth tests | Orchard | 3,818 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Css3 only dropdown menu | Riogrande | 2,519 Kb |
Multi column experiment. | Spylefkaditis | 2,805 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!