CSS3 文本塑形（心状文本排版）

Source: http://www.html5rocks.com/en/tutorials/shapes/getting-started/

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.text-section {
    width: 400px;
    height: 400px;
    margin: 0 auto;
}
p,
h1 {
    font-family: 'Open Sans Condensed', serif;
    text-align: justify;
}
.wrap-before {
    -webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%, 0 50%, 100% 0);
    shape-outside: polygon(0 0, 0 100%, 100% 100%, 0 50%, 100% 0);
    float: left;
    width: 50%;
    height: 100%;
}
.border-on .wrap-before {
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    background-color: hotpink;
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 0 50%, 100% 0);
    clip-path: polygon(0 0, 0 100%, 100% 100%, 0 50%, 100% 0);
}
.wrap-after {
    -webkit-shape-outside: polygon(100% 0, 100% 100%, 0% 100%, 100% 50%, 0% 0);
    shape-outside: polygon(100% 0, 100% 100%, 0% 100%, 100% 50%, 0% 0);
    float: right;
    width: 50%;
    height: 100%;
}
.border-on .wrap-after {
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    background-color: hotpink;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0% 100%, 100% 50%, 0% 0);
    clip-path: polygon(100% 0, 100% 100%, 0% 100%, 100% 50%, 0% 0);
}
button {
    margin: 0 auto;
    display: block;
    outline: 2px solid hotpink;
    box-shadow: none;
    padding: 1em 1.2em;
    background: white;
    border: none;
    color: dimgrey;
    cursor: pointer;
    position: absolute;
}
a {
    font-family: 'Open Sans Condensed', serif;
    text-align: center;
    display: block;
    color: grey;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
a:hover {
    color: hotpink;
}

HTML

Source: http://www.html5rocks.com/en/tutorials/shapes/getting-started/

编辑器支持Emmet

快捷键

Source: http://www.html5rocks.com/en/tutorials/shapes/getting-started/

three.js webgpu渲染器加载gltf模型代码示例（Chrome 113版本以上）

CSS构建的材质化元素：带边框的文本输入框（text input）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：