css实现文字心形布局效果代码-html代码-BFW代码库

css实现文字心形布局效果代码

代码语言：html

代码描述：css实现文字心形布局效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet">



    <style>
        html {
          height: 100%;
        }
        
        body {
          background-color: mistyrose;
          font-family: 'Montez', cursive;
        }
        
        
        #container {
          width: 1000px;
          height: 500px;
          margin: 0 auto;
        }
        
        span {
          color: transparent;
        }
        #left {
          float: left;
          height: 500px;
          width: 500px;
          shape-outside: polygon(51.33% 12px, 100.03% 2.17%, 97.87% 19.59%, 92.11% 16.84%, 83.26% 12.61%, 72.27% 12.33%, 59.8% 17.47%, 53.86% 27.8%, 52.21% 37.23%, 58.14% 52.53%, 68.47% 64.73%, 99% 87%, 217px 86.93%);
        }
        
        
        #right {
          float: right;
          height: 500px;
          width: 500px;
          shape-outside: polygon(70.33% 13px, 0.92% 2.68%, 0.92% 19.57%, 5.42% 18.47%, 9.85% 15.59%, 23.11% 11.65%, 32.26% 13.97%, 38.67% 16.73%, 43.4% 23.07%, 47.06% 29.8%, 46.41% 44.23%, 38.14% 57.33%, 26.67% 68.73%, 0.4% 87%, 353px 84.73%);
        }
        
        p {
          text-align: justify;
          color: #922a2a;
          position: relative;
        }
        
        
        p:before {
          content: "Hello World";
          position: absolute;
          font-size: 75px;
          top: 20px;
         .........完整代码请登录后点击上方下载按钮下载查看