CSS使用skew

在日常工作中，美术做的图不可能总是规则图形，面对不规则图形时最简单的方法就是让美术切图。有很多图形可以通过CSS本身实现而不需要切图，这里将介绍几种利用skew属性实现的几种效果。

# 阶梯层次效果

给父元素添加transform:skewX(25deg)，同时给子元素添加transform:skewX(-25deg)，就可以实现阶梯效果

代码如下

<div class="content">
  <div class="skew">
    <img src="https://lhost.oss-cn-chengdu.aliyuncs.com/blog/MainStar.png" alt="">
  </div>

  <div class="text">skew(25deg)</div>
  <div class="skewX">
    <img src="https://lhost.oss-cn-chengdu.aliyuncs.com/blog/MainStar.png" alt="">
  </div>
  <div class="text">skewX(25deg)</div>
  <div class="skewY">
    <img src="https://lhost.oss-cn-chengdu.aliyuncs.com/blog/MainStar.png" alt="">
  </div>
  <div class="text">skewY(25deg)</div>
</div>
<style>
.content {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;  
  transform:skewX(25deg);
  
  .text {
    // 抵消父元素的倾斜
    transform:skewX(-25deg);
  }
  .skew {
    transform: skew(25deg);
  }

  .skewX {
    transform: skewX(25deg);
  }
  
  .skewY {
    transform: skewY(25deg);
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# 绘制圆角倾斜Tab按钮

关键点是利用skew绘制平行四边形再给顶部添加圆角

代码如下

<div class="border">
  <div class="trangle-left"></div>
  <div class="trangle-right"></div>
</div>
<style>
.border {
  display: flex;
  flex-direction: row;
  margin: 20px;
  .trangle-left {
    position: relative;
    width: 50px;
    height: 40px;    
    background: red;
    border-top-left-radius: 20px;
  }
  .trangle-left::after {
    content: '';
    position: absolute;
    top: 0;    
    height: 40px;  
    width: 40px;
    left: -20px;
    background: red;
    transform: skewX(-25deg); 
    border-top-left-radius: 20px;
  }
  .trangle-right {
    position: relative;
    width: 50px;
    height: 40px;    
    background: blue;
    border-top-right-radius: 20px;
  }
  .trangle-right::after {
    content: '';
    position: absolute;
    top: 0;    
    height: 40px;  
    width: 40px;
    right: -20px;
    background: blue;
    transform: skewX(25deg); 
    border-top-right-radius: 20px;
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# 绘制扇形

首先绘制底部圆，添加overflow: hidden，利用transform: skew(-25deg)倾斜切割成扇形

<div class="sector">
  <div class="square">    
  </div>
  <div class="shape">    
  </div>
</div>
<style>
.shape {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #cccccc;
    overflow: hidden;
    position: relative;
  }
  .shape::before {
    content: '';
    position: absolute;
    right: 0;
    width: 50px;
    height: 50px;
    background: red;
    transform: skew(-25deg);
    transform-origin: 0% 100%;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

利用上面的扇形我们可以实现类型扫描雷达的效果，将skew改为skew(25deg)，修改位置和宽高形成扇形，给背景添加一个颜色渐变。

代码如下

.scan::before {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 80px;
    height: 80px;
    border-bottom: 1px solid #2D93FE;
    background-image: linear-gradient(180deg, transparent, #B0D5FD);
    transform: skew(25deg);
    transform-origin: 0% 100%;
   }

1
2
3
4
5
6
7
8
9
10
11
12

在给上面的扇形添加旋转动画，即可：

.scan::before {
	...
	animation: rotateAnimate 2s linear infinite
}
@keyframes rotateAnimate {
  from {
    transform: rotate(0deg)
  }
 
  to {
    transform: rotate(360deg)
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

本文章中的示例都在codepen上，你可以在线尝试和修改

#CSS

上次更新: 2025/09/05, 8:09:00

← CSS实现列表元素分割线 CSS让物体居中→