带有 CSS 和引导程序的平行四边形卡答案

【问题标题】：parallelogram card with css and bootsrap带有 CSS 和引导程序的平行四边形卡
【发布时间】：2022-01-28 06:54:23
【问题描述】：

如何用 css 或 bootsrap 制作这样的卡片？

【问题讨论】：

请向我们展示您目前拥有的代码。

标签： html css bootstrap-4 card

【解决方案1】：

展示你的作品比在这里寻找答案复制粘贴更好。

以下示例未考虑响应式设计，使用的是 bootstrap-4。

你可以把它作为参考，从Bootstrap查看ml-3、shadow等不同类的含义

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous" />

  <title>Hello, world!</title>
</head>
<style>
  .diagonal-left {
    width: 100px;
    height: 100px;
    background-color: #deadee;
    transform: skewX(30deg);
    transform-origin: top;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .diagonal {
    width: 350px;
    height: 100px;
    background-color: #319b9e;
    transform: skewX(30deg);
    transform-origin: top;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .diagonal>span {
    transform: skewX(-30deg);
    color: white;
  }
</style>

<body>
  <div class="ml-3 row">
    <div class="diagonal-left shadow"></div>
    <div class="diagonal shadow"><span>Title<br>123</span></div>
  </div>

  </div>

  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

  <!-- Option 2: Separate Popper and Bootstrap JS -->
  <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
    -->
</body>

</html>

【讨论】：

在移动模式下没有响应嗯..
我鼓励你看看这个getbootstrap.com/docs/4.6/layout/grid/#auto-layout-columns。您只需添加引导程序定义的类，例如col-(x)，即可使其具有响应性。