masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > 利用CSS3新增内容实现制作透明三角形的方法实例展示

利用CSS3新增内容实现制作透明三角形的方法实例展示

巴扎黑
Lepaskan： 2017-08-11 13:59:14
asal
1814 orang telah melayarinya

本文分享一个利用CSS3制作三角形的示例，感兴趣的朋友可以参考一下。

先来看一下效果，这在CSS3之前，完全是不可想象的，只有图片才能做的到，但在HTML5和CSS3大行其道的今天，实现这种效果，那都不是事啊。

看一下实现的代码：


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

48

49

<!DOCTYPE html>

<html>

<head>

<style type=&#39;text/css&#39;>

 

/* 上三角 */

.arrow-up {

 width: 0;

 height: 0;

 border-left: 20px solid transparent;

 border-right: 20px solid transparent;

 border-bottom: 20px solid green;

}

 

/* 下三角 */

.arrow-down {

 width: 0;

 height: 0;

 border-left: 20px solid transparent;

 border-right: 20px solid transparent;

 border-top: 20px solid orange;

}

 

/* 右三角 */

.arrow-right {

 width: 0;

 height: 0;

 border-top: 60px solid transparent;

 border-bottom: 60px solid transparent;

 border-left: 60px solid blue;

}

 

/* 左三角 */

.arrow-left {

 width: 0;

 height: 0;

 border-top: 10px solid transparent;

 border-bottom: 10px solid transparent;

 border-right: 10px solid silver;

}

</style>

</head>

<body>

 <p class="arrow-up"></p>

 <p class="arrow-down"></p>

 <p class="arrow-left"></p>

 <p class="arrow-right"></p>

</body>

</html>

Salin selepas log masuk

Atas ialah kandungan terperinci 利用CSS3新增内容实现制作透明三角形的方法实例展示. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css css3
Artikel sebelumnya：有关对CSS清除浮动方法总结 Artikel seterusnya：CSS中居中方式总结
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan