Maison > interface Web > tutoriel CSS > Un exemple de création de triangles transparents en utilisant le nouveau contenu de CSS3

Un exemple de création de triangles transparents en utilisant le nouveau contenu de CSS3

巴扎黑
Libérer: 2017-08-11 13:59:14
original
1783 Les gens l'ont consulté

Cet article partage un exemple d'utilisation de CSS3 pour créer un triangle. Les amis intéressés peuvent s'y référer.

Jetons d'abord un coup d'œil à l'effet. Avant CSS3, c'était complètement inimaginable. Mais aujourd'hui, alors que HTML5 et CSS3 sont si populaires, ce n'est pas un problème d'obtenir cet effet.

Regardez le code implémenté :


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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal