123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <article>
  
  <img class="shape1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/blue-butterfly.jpg" />
  
  <h1>CSS&nbsp;Shapes</h1>
  <p>Handmade – with a little help from <a href="http://razvancaliman.com/writing/css-shapes-editor-chrome/" target="_blank">css shapes editor for chrome</a></p> 

  <p>Resize window sit amet sed velit nibh, sodales at quam a, vulputate mattis arcu. Sed rhoncus tortor ac erat scelerisque, nec laoreet justo pharetra. Aliquam dui metus, pellentesque in ipsum in, pharetra auctor diam. Pellentesque interdum ultricies erat, eget dapibus lorem commodo nec. Proin sit amet tempor elit. Donec eget quam at quam facilisis imperdiet eu vitae diam. Aliquam erat volutpat. Integer porttitor finibus metus eu aliquam. Sed in justo in velit sagittis suscipit. Aenean feugiat eget purus a bibendum. Cras eget magna eu purus sollicitudin elementum eu at magna. Ut ac blandit felis, ut lacinia est. Curabitur mollis dictum tortor, vitae condimentum est iaculis non. Suspendisse nunc eros, convallis non leo vel, dapibus luctus nulla. Morbi pretium ullamcorper turpis sed tincidunt. Duis ac sollicitudin enim.</p><p>Mauris odio nisi, laoreet vitae mi et, ultricies blandit velit. Maecenas sit amet ligula vel risus congue imperdiet. Maecenas in augue vitae tellus hendrerit fermentum a id augue. Cras condimentum tincidunt tortor, viverra interdum risus dapibus ac. Maecenas euismod elementum magna sit amet convallis. Pellentesque feugiat pellentesque pellentesque. Phasellus at dolor nibh. Vivamus vitae ultrices ante. Maecenas tristique, dolor sit amet consectetur maximus, ante eros venenatis leo, in porttitor dolor velit eget neque. Nulla quis libero scelerisque velit malesuada facilisis.</p>
  
  <img class="shape2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/blue-butterfly.jpg" /><p>
  
  Suspendisse nec orci felis. Vivamus ac velit euismod, ullamcorper odio in, pharetra sem. Donec vel nisl aliquam, hendrerit urna quis, tempor nisl. Mauris ut tincidunt velit. Nam pulvinar arcu id nisi vestibulum, eu fringilla arcu placerat. Aliquam ultricies convallis interdum. Aenean risus elit, egestas vitae ullamcorper vel, posuere sed erat.</p><p>Quisque maximus gravida erat at vestibulum. Proin tempus faucibus libero eu dapibus. Maecenas accumsan blandit urna, id convallis nisl semper eu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut tempus lorem sapien, sed mattis erat luctus blandit. Nullam scelerisque risus sit amet lorem fringilla egestas. Nullam id dolor et nisl sodales semper. Vivamus vel ligula leo. Curabitur interdum libero eget erat vestibulum fermentum. Suspendisse potenti.</p><p>Dolor Sit Amet Sed velit nibh, sodales at quam a, vulputate mattis arcu. Sed rhoncus tortor ac erat scelerisque, nec laoreet justo pharetra. Aliquam dui metus, pellentesque in ipsum in, pharetra auctor diam. Pellentesque interdum ultricies erat, eget dapibus lorem commodo nec. Proin sit amet tempor elit. Donec eget quam at quam facilisis imperdiet eu vitae diam. Aliquam erat volutpat. Integer porttitor finibus metus eu aliquam. Sed in justo in velit sagittis suscipit. Aenean feugiat eget purus a bibendum. Cras eget magna eu purus sollicitudin elementum eu at magna. Ut ac blandit felis, ut lacinia est. Curabitur mollis dictum tortor, vitae condimentum est iaculis non. Suspendisse nunc eros, convallis non leo vel, dapibus luctus nulla. Morbi pretium ullamcorper turpis sed tincidunt. Duis ac sollicitudin enim.</p><p>Mauris odio nisi, laoreet vitae mi et, ultricies blandit velit. Maecenas sit amet ligula vel risus congue imperdiet. Maecenas in augue vitae tellus hendrerit fermentum a id augue. Cras condimentum tincidunt tortor, viverra interdum risus dapibus ac. Maecenas euismod elementum magna sit amet convallis. Pellentesque feugiat pellentesque pellentesque. Phasellus at dolor nibh. Vivamus vitae ultrices ante. Maecenas tristique, dolor sit amet consectetur maximus, ante eros venenatis leo, in porttitor dolor velit eget neque. Nulla quis libero scelerisque velit malesuada facilisis.</p>
</article>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);
*, *:before, *:after {
  box-sizing: border-box;
  text-decoration: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  color: white;
}

h1 {
  font: 100 3em/1.5 'Lato', sans-serif;
  text-transform: uppercase;
  margin-top: 1em;
}

p {
  font: 300 1.05em/1.5 'Lato', sans-serif;
  margin-bottom: 1.1em;
}

body {
  background: #000;
}

article {
  padding: 3em;
  max-width: 1000px;
  margin: 0 auto;
}

a {
  color: #40c7f7;
}

.shape1 {
  display: block;
  width: 100%;
  float: right;
  shape-margin: 1em;


  shape-outside: polygon(29.95% 66.4%, 33.05% 61.1%, 37.85% 56.65%, 45.65% 51.75%, 50.75% 50.5%, 56.2% 50%, 65.2% 53.2%, 56.35% 46.9%, 58.5% 44%, 62.4% 46.35%, 66.55% 51.45%, 64.5% 39.5%, 66.9% 29.05%, 72.45% 17.2%, 80.05% 11.85%, 85.95% 10.6%, 89.4% 14%, 90.2% 25.3%, 92.35% 33.2%, 93.6% 39.3%, 93.85% 48.65%, 90.1% 55.4%, 84.3% 58.4%, 81.95% 62.05%, 78.6% 64.85%, 78.55% 69.1%, 73.65% 67.1%, 75.25% 73.25%, 72.05% 82.05%, 67.2% 86.1%, 61.2% 87.65%, 51.25% 84.95%, 47.95% 80.3%, 44.15% 79.9%, 39.1% 76.25%, 31.6% 74.6%, 29.95% 71.05%);
}

.shape2 {
  width: 100%;
  float: left;
  transform: scale(-1, 1);
  z-index: 0;

shape-outside: polygon(6.25% 53.45%, 5.3% 45.1%, 5.9% 34.7%, 9.2% 21.2%, 9.5% 11.65%, 20.1% 9.75%, 30.55% 19.35%, 35.2% 28.25%, 37.7% 41.15%, 46.9% 48.45%, 58.1% 54.45%, 67.15% 60.9%, 71.5% 71.95%, 65.9% 78.8%, 57.3% 84.6%, 46.25% 89.6%, 33.8% 90%, 26.8% 85.25%, 23.5% 74.2%, 19.3% 66.1%, 9.8% 59.05%);
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console