书本45°斜封面

书本45°斜封面

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="book">
      <div class="book-blue">
        <div class="title">哑舍</div>
      </div>
    </div>
  </body>
</html>
<style>
  .book {
    margin: 50px auto;
    width: 300px;
    height: 150px;
    background: white;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 90;
  }

  .book .book-blue {
    width: 85px;
    height: 88px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px;
  }

  .book .title {
    font: bold 15px Sans-Serif;
    color: #fff;
    text-align: center;
    text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    position: relative;
    padding: 7px 0;
    left: -5px;
    top: 15px;
    width: 120px;
    background-color: #3f73f4;
    background-image: -webkit-linear-gradient(top, #6c8fe7, #3f73f4);
    background-image: -moz-linear-gradient(top, #6c8fe7, #3f73f4);
    background-image: -ms-linear-gradient(top, #6c8fe7, #3f73f4);
    background-image: -o-linear-gradient(top, #6c8fe7, #3f73f4);
    color: #fff;
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  }

  .book .title:before,
  .title:after {
    content: "";
    border-top: 3px solid #3f73f4;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    bottom: -3px;
  }

  .book .title:before {
    left: 0;
  }

  .book .title:after {
    right: 0;
  }
</style>
版权声明：本文为qq_42068550原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。