html - 如何使用CSS旋转四列？

This question already has an answer here:

5 images symmetrically seperated with diagonal lines

                                    （1个答案）


                                2个月前关闭。


我有四列，我需要使其旋转如下图所示：-

我想要的是：-

我试过的：-

  .parent-box{ width:100%; background:#00CC66; overflow:hidden; height:400px;}
  .my-box{ background:#f1f1f1; border:1px solid #ccc; height:600px; transition:all; transform:rotate(20deg); margin-top:-100px;}
  .first{ width:33%;}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row m-0 parent-box">
<div class="col"><div class="my-box"></div></div>
<div class="col"><div class="my-box"></div></div>
<div class="col"><div class="my-box"></div></div>
<div class="col"><div class="my-box"></div></div>
</div>

</body>
</html>

如何使其与图片所示相同？

答案将不胜感激！

最佳答案

尝试使用此代码。希望对您有所帮助。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
  .parent-box{ width:100%; background:#00CC66; overflow:hidden; height:400px;}
  .my-box{ background:#f1f1f1; border:1px solid #ccc; height:600px; transition:all; transform:rotate(12deg); margin-top:-100px;}
  .first{ width:33%;}
  .parent-box .col{padding: 0;}
</style>
<body>
    <div class="row m-0 parent-box">
        <div class="col"><div class="my-box1"></div></div>
        <div class="col"><div class="my-box"></div></div>
        <div class="col"><div class="my-box"></div></div>
        <div class="col"><div class="my-box1"></div></div>
    </div>
</body>
</html>