W3Schools Tryit 编辑器 - W3Schools 中文教程

<!DOCTYPE html>
<html>
<head>
  <title>Notebook Example</title>
  <style>
    #app {
      border: black dashed 1px;
      width: 300px;
      padding: 20px;
    }
    #app > div {
      width: 100%;
      position: relative;
      margin-top: 10px;
      aspect-ratio: 1;
      background-image: url("img_notebook.jpg");
      background-size: 340%;
      background-position: -345px 0;
      overflow: hidden;
    }
    #app span {
      width: 80%;
      font-weight: bold;
      font-family: 'Courier New', Courier, monospace;
      line-height: 1.2em;
      transform-origin: 0 0;
      rotate: 33deg;
      position: absolute;
      top: 50px;
      left: 70px;
    }
    #app textarea {
      width: 100%;
      box-sizing: border-box;
    }
  </style>
</head>
<body>

<h1>Example: Notebook</h1>

</body>
</html>