admin管理员组

文章数量:1794759

work

work

时间：2022-04-20

文章目录

    • 1、实现描述
    • 2、思路分析
    • 3、针对 头部凹陷
      • 三盒子摆放方式
    • 4、给两边盒子的属性
    • 5、简单代码实现例子
    • 6、总结

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>

实现效果（未加 overflow: hidden;）

实现效果（加上 overflow: hidden;）

6、总结

1、头部分成三盒子；
2、把焦点放在两边盒子；
3、两边盒子加上：transform: perspective(2em) rotateX(42deg);

握草，好6啊，666666666666666666666666666

参考文献：
=%257B%2522request%255Fid%2522%253A%2522165043460716782248522357%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=165043460716782248522357&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allfirst_rank_ecpm_v1~rank_v31_ecpm-2-85016836.142v9pc_search_result_cache,157v4new_style&utm_term=%E5%A6%82%E4%BD%95%E5%88%B6%E4%BD%9C%E6%A2%AF%E5%BD%A2&spm=1018.2226.3001.4187

本文标签： Work

版权声明：本文标题：work 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1695312074a306485.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。