使用CSS3裁剪路径（clip-path）属性实现燕尾形状的文本

1. Clipping and Masking in CSS 2. clip-path on WPD 3. clip-path on MDN 4. CSS Masking 里面还包含几个很好的clip-path在线教程的链接。

CSS3，教程

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/** Try the animation! **/

/**.content {animation: star 1s infinite;}**/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

/** Styling **/
body {
  font-family: 'Open Sans', sans-serif;
  background: #eee;
  color: #222;
}
h1, .description {
  text-align: center;
  margin: 5px 0;
}
a {color: #000;}
::-moz-selection {background: rgba(0,0,0,0.15);}
::selection {background: rgba(0,0,0,0.15);}

/** The Clip Box **/
.content {
  position: absolute;
  margin: auto auto;
  top: 0; right: 0; bottom: 40px; left: 0;
  width: 500px;
  height: 280px;
  padding: 20px;
  background: #3498db;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-clip-path: polygon(
      0 0, 50% 30px, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));
          clip-path: polygon(
      0 0, 50% 30px, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));
  -webkit-transition: all 200ms;
  transition: all 200ms;
}
.content:hover {
  -webkit-clip-path: polygon(
      0 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
          clip-path: polygon(
      0 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
    height: 320px;
  padding-top: 0;
}

/** custom scrollbar **/
::-webkit-scrollbar {width: 15px;}
::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, .2);}
::-webkit-scrollbar-thumb {background-color: rgba(255, 255, 255, .25);}

/** Fun Animation! **/
@-webkit-keyframes star {
  0% {-webkit-clip-path: polygon(
      0 0, 50% 30px, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));clip-path: polygon(
      0 0, 50% 30px, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));}
  50% {-webkit-clip-path: polygon(
      0 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%);clip-path: polygon(
      0 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%);}
  100% {-webkit-clip-path: polygon(
      0 0, 50% 30px, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));clip-path: polygon(
      0 0, 50% 30px, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));}
}
@keyframes star {
  0% {-webkit-clip-path: polygon(
      0 0, 50% 30px, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));clip-path: polygon(
      0 0, 50% 30px, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));}
  50% {-webkit-clip-path: polygon(
      0 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%);clip-path: polygon(
      0 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%);}
  100% {-webkit-clip-path: polygon(
      0 0, 50% 30px, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));clip-path: polygon(
      0 0, 50% 30px, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));}
}

/** Just in case... **/
@media (max-height: 500px) {
  h1, .description {display: none;}
  .content {scale: 0.7;}
}

/* NO-BEAUTIFY */

HTML

<h1>Experiment with <code>clip-path</code></h1>
<p class="description">Hover over the <code>&lt;div&gt;</code> to see the transition. Also note the custom <code>-webkit-</code> scrollbar.</p>
<div class="content">
    <h2>Clip-Path Example</h2>
    <p>The clip-path property prevents a portion of an element from drawing by defining a clipping region.<sup>[<a href="#ref-1">1</a>]</sup> This way we can make different shapes out of HTML elements. The clip-path property can be applied to all HTML elements,
        SVG graphic elements and SVG container elements.<sup>[<a href="#ref-2">2</a>]</sup> It is also fully <a href="https://codepen.io/chriscoyier/pen/YPyYGx">animatable</a>! I added a simple animation for this pen. All you have to do is uncomment line
        3 in the CSS editor.</p>
    <p>If you are interested in learning more about <code>clip-path</code>, I recommend these sources:</p>
    <ul>
        <li><a href="https://css-tricks.com/clipping-masking-css/">Clipping and Masking in CSS</a>
        </li>
        <li><a href="https://docs.webplatform.org/wiki/css/properties/clip-path">clip-path on WPD</a>
        </li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path">clip-path on MDN</a>
        </li>
        <li><a href="https://www.html5rocks.com/en/tutorials/masking/adobe/">CSS Masking</a>
        </li>
    </ul>
    <h4>References</h4>
    <small><ol>
    <li id="ref-1"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path">Mozilla Developer Network</a>, 2014</li>
    <li id="ref-2"><a href="https://www.html5rocks.com/en/tutorials/masking/adobe/">HTML5Rocks</a>, April 4th, 2013</li>
  </ol></small>
</div>

1. Clipping and Masking in CSS 2. clip-path on WPD 3. clip-path on MDN 4. CSS Masking 里面还包含几个很好的clip-path在线教程的链接。

CSS3，教程

编辑器支持Emmet

快捷键

1. Clipping and Masking in CSS 2. clip-path on WPD 3. clip-path on MDN 4. CSS Masking 里面还包含几个很好的clip-path在线教程的链接。

CSS3，教程

使用CSS3自动实现文章标题级别（自动目录 | 自动序号）

CSS3基线 辅助设计排版网格

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

CSS3基线辅助设计排版网格