css样式练习

地址：https://cssbattle.dev/play/112

解决思路

把一个正方形用css样式写成一个长方形，再通过css样式写成梯形（不会，上百度查找答案），然后调整角度，浮动到指定位置

难点

1. 如何用css画棱形
   skew：拉伸变换
   解决：参考地址：https://blog.csdn.net/sinat_33255495/article/details/125144900

问题和解决

1. 不会用css画梯形
   transform: perspective(.5em) rotatex(5deg);

2. 画好梯形后，如何旋转角度
   使用切角方法：background: linear-gradient(-135deg, transparent 30px, #293D7E 0);
   再旋转：transform: rotate(-45deg);

3. 为什么没有使用切角的方案去尝试？
   固定思维，不愿意去尝试新的方法

4. 切角的原理是什么？
   通过角度渐变实现，将渐变开始部分设置成透明

5. 角度的旋转方向
   transform: rotate(45deg);
   顺时针旋转

6. 角度逆时针旋转
   transform: rotate(-45deg);

7. 两个三角形重叠会出现多一角或缺失一角
   ①画一个完整三角形，画一个梯形，旋转好角度，再浮动过去
   ②使用覆盖方案，把第二个三角形的左右边框设置为透明

8. 两个圆相交的位置的颜色如何实现跟背景色统一
   css3的clip-path方法裁切图片（三角形，多边形，圆，椭圆）：
   https://blog.csdn.net/growb/article/details/125913006
   https://blog.csdn.net/cwyp18809/article/details/105097282/
   方法一：底部画两个大圆，中间部位画一个椭圆覆盖上去，椭圆的关键代码：clip-path:circle(50% at 180px 75px);

9. 如何实现下面的图形：
   
   四个圆、边框，公共元素：
   <div class='a center'></div>
   <div class='b center b1 yuan'></div>
   <div class='b center b2 yuan'></div>
   <div class='c center c1 yuan'></div>
   <div class='c center c2 yuan'></div>
   .yuan{
   width:60px;
   height:60px;
   border-radius:100%;
   }
   .b{
   background:#F5BB9C;
   border:10px solid #09042A;
   }
   居中，公共元素：
   .center{
   position:fixed;
   left:50%;
   top:50%;
   }
   调整距离：
   .c1{
   margin-left:-100px;
   margin-top:-40px;
   }
   中间的连接处想象成一个方块，利用上下两个圆的边框去覆盖一部分：
   .a{
   width:100px;
   height:50px;
   background:#E78481;
   margin-left:-50px;
   margin-top:-25px;
   }

10. 12个图形分成四排、nth-child 表达式的使用(颜色)
    
    ①排列：
    单纯使用display:inline-block; 会加大左边距，只能排三个
    使用行内元素display:block; 浮动float:left;
    ②nth-child 表达式的使用(颜色)，可以分成三部分
    HTML
    <div class="block"></div>
    <div class="block2"></div>
    <div class="block"></div>
    CSS样式
    .block .box:nth-child(2n){
    background:#F5D6B4;
    }
    .block2 .box:nth-child(2n-1){
    background:#F5D6B4;
    }

总结

• 用时：
  可以提高的地方
  transform的用法，角度旋转方向，旋转原点设置