CSS3 Shape图片外形塑造

为图片塑造外形，区块轮廓。使用了CSS Shape技术以及Chrome37最新版本带来的Shape编辑器。

shape

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2511
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div class="container" ng-app="myApp" ng-controller="Example">
    <div class="jumbotron">
        <div class="container">
            <h2>CSS Shapes</h2>
          <p><a href="https://blogs.adobe.com/webplatform/2014/09/03/css-shapes-editor-for-chrome/">Adobe writes about a <code>CSS Shapes</code> editor extension</a>, I tried to install it at it works like a charm! <br />It is a very exciting new feature landing in our browsers. However you will need the latest Chrome (37 at the time of writing) to enjoy this feature.</p>
                    </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9729/money.jpg" alt="" class="clip image" />
<p>Bacon ipsum dolor sit amet swine meatball corned beef sirloin pancetta ribeye. Doner meatloaf pork, ball tip pancetta chuck ground round shoulder t-bone tail short ribs boudin. Shankle pork fatback bacon. Shank andouille t-bone venison corned beef shoulder frankfurter.</p>
<br />
<p>Pork chop frankfurter tri-tip kevin, sirloin tenderloin andouille ham hock. Bacon pork loin ham hock corned beef fatback tail leberkas ham andouille. Chuck fatback turducken jowl tenderloin short ribs tri-tip. Short loin doner corned beef salami pork belly, boudin tenderloin kevin. Short ribs biltong meatloaf tenderloin, landjaeger strip steak tri-tip cow corned beef turducken meatball pig swine pancetta bacon. Chicken leberkas brisket chuck kielbasa.</p>
<br />
            </div>
        </div>
    </div>
  </div>

为图片塑造外形，区块轮廓。使用了CSS Shape技术以及Chrome37最新版本带来的Shape编辑器。

shape

编辑器支持Emmet

快捷键

为图片塑造外形，区块轮廓。使用了CSS Shape技术以及Chrome37最新版本带来的Shape编辑器。

shape

使用CSS3的shape-outside特性实现文本沿特定外形路径环绕效果

使用gsap motionpath插件和pixi3实现图形聚合粒子特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：