work-notes（8）：如何制作卡片凹陷？如何制作梯形？如何制作有凹陷的盒子？如何制作透明凹陷？

本文链接：https://blog.csdn.net/jinzai9976/article/details/124297155

时间：2022-04-20

文章目录

1、实现描述

我们公司开发了一个视频会议网站，有一个会议列表卡片头部是有一个透明凹陷的，NND还没见过这样无理的要求；

要求：
1、透明的凹陷；
2、透明位置能根据背景颜色变化（说白了不能写死颜色，就是背景整张图是渐变颜色的）

大概是需求这样：
在这里插入图片描述

2、思路分析

一开始我一直从 border 出发，就是想着怎么搞这个颜色，后面发现思路错了；

border的确可以实现梯形，但是颜色什么的就很难搞了，总会有些问题；
在这里插入图片描述
正题：
首先确定好方向，把这个卡片进行层划分；

1、外层大盒子；
2、上部分凹陷；
3、下部分内容；

注意：背景颜色，不要直接给外层大盒子；
在这里插入图片描述

3、针对头部凹陷

你肯定想到了，把头部凹陷分成三块，真棒，来我们继续；
在这里插入图片描述
一开始我也在就纠结，怎么把中间这个盒子搞两个斜边出来。老把焦点汇集在中间的盒子。

这个就是错误的思路点；

把焦点放到两边盒子才行；

三盒子摆放方式

1、个给外层盒子 diplay: flex;
2、给旁边两个 flex: 1;
3、中间盒子 flex: 2；

意思：
平均分配外层盒子空间，中间占 2 份（2/4），左右占 1 份（1/4）；
自然实现盒子居中；

4、给两边盒子的属性

transform:  perspective(2em) rotateX(42deg);

想不到吧，我也没想到；

解释：

perspective：对元素进行透视操作
rotateX：以x轴（横轴）进行旋转（前后仰俯）

原理：
就像这个图片，你看远处的时候，是不是显得比近的地方更小，形成了视觉效果。

但是你做到卡片上时，看到的只是一个平面的，所以实现效果就很客观；
在这里插入图片描述
这里还可以设置 Y轴的方向，说不定哪天它们他们给你来个左右边给你来个凹陷？也可以用。

角度 deg 自己调整一下，就是那个梯形坡度的大小显示；

5、简单代码实现例子

代码：

<!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>
    <style>
        body {
            background-color: #0955AE;
        }

        .out_box {
            width: 400px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid red;
        }

        .header {
            overflow: hidden;   /* 隐藏超出部分 ************************/
            display: flex;
            height: 25px;
        }

        .sunkenclass {
            flex: 1;
            background-color: #afc;
            transform: perspective(2em) rotateX(42deg); /* 重点代码在这里********************* */
        }

        .sunkenbox {
            flex: 2;
        }

        .body {
            height: 275px;
            background-color: #afc;
        }
    </style>
</head>

<body>

    <div class="out_box">
        <div class="header">
            <div class="sunkenclass"></div>
            <div class="sunkenbox"></div>
            <div class="sunkenclass"></div>
        </div>
        <div class="body"></div>
    </div>
</body>

</html>