使用 CSS 的钻石卡片布局

今天，我将向你展示如何使用 HTML 和 CSS 通过几个步骤设计一个菱形卡片布局（项目应该正好是四个）

步骤 1 - 设置布局的 HTML 结构
值得一提的是，HTML 结构非常重要。糟糕的 HTML 结构会导致 CSS 样式设计复杂化。
首先，我们在 HTML 主体中创建一个部分，用于构建钻石卡片的布局。接下来，创建一个用于容纳卡片的容器。

简单的技巧是，我们想要位于钻石顶部和底部的两张卡片应该一起包裹在一个容器中，请参阅下面的代码：

 <section class="diamond-card">
            <h1>Diamond Card section design with CSS</h1>
            <div class="card-container">
                <div class="card">
                    <div class="card-content card-content-1">
                        <h2>Launch your product</h2>
                        <p>Lorem ipsum dolor sit amet consectetur.</p>
                        <div class="img-container"><img src="images/process-4.svg" alt="process"></div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content card-content-2">
                        <h2>Project brief</h2>
                        <p>Lorem ipsum dolor sit amet nhir consectetu nhir adipisicing elit. </p>
                        <div class="img-container"><img src="images/process-1.svg" alt="process"></div>
                    </div>
                    <div class="card-content card-content-3">
                        <h2>Start Developing</h2>
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <div class="img-container"><img src="images/process-3.svg" alt="process"></div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content card-content-4">
                        <h2>Wireframes & Design</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <div class="img-container"><img src="images/process-2.svg" alt="process"></div>
                    </div>
                </div>
            </div>
 </section>

步骤 2 - 添加 CSS 样式
让我们添加一些基本的 CSS 样式。默认情况下，HTML 元素的边距和填充（通常约为 8px）由浏览器设置。我们使用全局选择器“*”覆盖这些属性，并将值设置为 0。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #fafafa;
  font-family: "Poppins", sans-serif;
}

h1 {
  font-weight: 600;
  color: #7f7e84;
  text-align: center;
  font-size: 2.5rem;
  text-transform: uppercase;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.445);
}

.diamond-card {
  padding: 1rem 0;
}

接下来，定位“card-container”类并赋予它一个 flex 显示，以便将卡片并排排列在同一行上。


.card-container {
  width: 80%;
  margin: 40px auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.card {
  flex-basis: 30%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  gap: 30px;
}

.card-content {
  border-radius: 5px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 22px 0 rgba(128, 128, 129, 0.37);
}

.card-content h2 {
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 1.3rem;
}
.card-content p {
  color: #5c5b5b;
  font-size: 14px;
}

.img-container {
  margin-top: 10px;
  text-align: right;
}

.img-container img {
  width: 7rem;
}

基本上就是这样！剩下的样式就交给你了。
我们可以继续为每张卡片添加一些悬停效果和边框设计：

.card-content:hover {
  cursor: pointer;
  transition: 0.3s;
  transform: scale(1.1);
}

.card-content:hover p {
  color: rgb(34, 34, 34);
}

.card-content-1 {
  border: 3px solid #45d3d3;
}

.card-content-2 {
  border: 3px solid #ea5353;
}

.card-content-3 {
  border: 3px solid #fc4ac1;
}

.card-content-4 {
  border: 3px solid #549ef2;
}

好了！我们刚刚设计了一个菱形卡片布局。您可以尝试一下，调整一下。您可以尝试让设计更具响应性，这对我们来说是一个挑战。

文章来源：https://dev.to/veedjohnson/diamond-card-layout-with-css-3acm