css绘制场景应用

css绘制场景应用

1、三角形

利用border属性，将border可视化，发现它并不是矩形组成的：

image-20250214221911820

1
2
3
4
5
6
7
div {
    width: 100px;
    height: 100px;
    background-color: rgb(70, 23, 114);
    border: 100px solid;
    border-color: aqua rebeccapurple red green;
}

将div盒子的宽高设置为0，显示的是四个三角形：

image-20250214221956511

于是利用透明度、边框长度等进行组合，绘制三角形：

image-20250214222330191

1
2
3
4
5
6
7
div {
            width: 0px;
            height: 0px;
            border-top: 100px solid aqua;
            border-right:100px solid transparent;
            border-left:100px solid transparent;
        }

image-20250214223021160

1
2
3
4
5
6
7
div {
            width: 0px;
            height: 0px;
            border-left: 100px solid green;
            border-bottom:100px solid transparent;
            border-top:100px solid transparent;
        }

image-20250214222926636

1
2
3
4
5
6
7
div {
           width: 0px;
           height: 0px;
           border-left: 100px solid transparent;
           border-bottom:100px solid red;
           border-right:100px solid transparent;
       }

image-20250214223058709

1
2
3
4
5
6
7
div {
            width: 0px;
            height: 0px;
            border-right: 100px solid rebeccapurple;
            border-bottom:100px solid transparent;
            border-top:100px solid transparent;
        }

image-20250214223345658

1
2
3
4
5
6
div {
    width: 0px;
    height: 0px;
    border-right: 100px solid transparent;
    border-top:100px solid blue;
}

2、扇形

利用三角形的绘制，加上一个圆角属性就可以啦~

image-20250214233418311

1
2
3
4
5
6
7
div {
   width: 0; 
   height: 0;
   border: 100px solid transparent;
   border-top: 100px solid red;
   border-radius: 100px;
}

3、圆形

先绘制一个正方形，再设置圆角属性 border-radius: 50%

image-20250214234606559

1
2
3
4
5
6
div {
   width: 100px;
   height: 100px;
   background-color: red;
   border-radius: 50%
}

4、半圆

绘制长宽为2比1的矩形，再设置圆角属性，只设置左上，右上。

image-20250215000825948

1
2
3
4
5
6
div {
   width: 100px;
   height: 50px;
   background-color: red;
   border-radius: 50px 50px 0 0;
}

5、宽高自适应正方形

  • 利用vw/vh，宽高取相对于视口的百分比单位

    1
    2
    3
    4
    5
    div {
       width: 10vw;
       height: 10vh;
       background-color: tomato;
    }

  • 利用width取百分比，高度由padding撑开，和width的百分比相同。

    1
    2
    3
    4
    5
    div {
       width: 20%;
       padding-top: 20%;
       background-color: tomato;
    }

  • 利用width取百分比，高度由伪元素撑开。父元素一定要设置overflow: hidden;

    若不设置 overflow: hidden，父级 div 的高度会被「塌陷」为 0！常规文档流中，相邻元素的垂直外边距会合并伪元素的 margin-top 会「穿透」父容器，导致父容器高度计算异常。

    通过设置 overflow: hidden：

    • 创建了独立的布局环境 (BFC)

    • 阻断外边距折叠

    • 强制父容器包含子元素的 margin

      说明：还可以设置 **display: flow-root;**或者 **float: left;**或者 position: absolute;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    div {
       width: 20%;
       overflow: hidden;
       background-color: tomato;
    }
    div::after {
        content: '';
        display: block;
        margin-top: 100%;
      }

6、梯形

先给一个宽度，再给下边距，显示为一个矩形后，再定义透明的右边距，去覆盖掉一部分。

image-20250215004209063

1
2
3
4
5
div {
   width: 100px;
   border-bottom: 100px solid red;
   border-right: 80px solid transparent;
}

同理，可以绘制等腰梯形：

image-20250215004410270

1
2
3
4
5
6
div {
   width: 100px;
   border-bottom: 100px solid red;
   border-right: 80px solid transparent;
   border-left: 80px solid transparent;
}

7、画一条0.5px的线

利用缩放 transform: scale(0.5,0.5);

8、如何解决 1px 问题？

1px问题：通常指的是在网页设计中使用 CSS 定义 1px 的线条或边框时，在不同设备（尤其是高分辨率或 Retina 屏幕）上实际显示效果与预期不一致的问题。设计师常希望得到“极细”的线条（hairline），在某些设备上 1px 的线条可能看起来太粗。在高分辨率屏幕上，一个 CSS 像素可能对应多个物理像素。例如，在 Retina 屏幕上，1 CSS 像素可能等于 2 或 3 个物理像素，这样 1px 的边框就会显得比真正的 1 个物理像素粗很多。

**？ ** 如何解决呢

1、获取DPR，直接把 1px 改成 1/devicePixelRatio 后的值。这种方法的缺陷在于兼容性不行，IOS 系统需要8及以上的版本，安卓系统则直接不兼容。

1
<div id="container" data-device={{window.devicePixelRatio}}></div>
1
2
3
#container[data-device="2"] {
  border:0.5px solid #333
}

2、伪元素先放大后缩小。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#container[data-device="2"] {
    position: relative;
}
#container[data-device="2"]::after{
      position:absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      content:"";
      transform: scale(0.5);
      transform-origin: left top;
      box-sizing: border-box;
      border: 1px solid #333;
    }
}

3、viewport 缩放。这样做的副作用也很大，整个页面被缩放了。

1
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">