Étapes de mise en œuvre de l'écriture d'un parallélogramme à l'aide du code CSS3-tutoriel CSS-php.cn

Étapes de mise en œuvre de l'écriture d'un parallélogramme à l'aide du code CSS3

php中世界最好的语言

Libérer： 2017-11-30 11:16:36

original

2711 Les gens l'ont consulté

Nous savons que si vous souhaitez utiliser CSS3 pour créer un effet de rotation, vous utiliserez l'attribut transform rotation de CSS3 pour l'écrire. La syntaxe est transform: skew. Créons un quadrilatère tourné pour tout le monde à titre d'étude de cas. Les amis intéressés peuvent le faire eux-mêmes.

Le code est le suivant :

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>用css3旋转写平行四边形</title>
<style type="text/css">
.box{width:1200px;margin:100px auto;}
.skew{width:1000px;height:734px;background:#f0eb4f;margin:0 auto;color:#000;
font-size:20px;line-height:500px;text-align:center;transform: skew(-15deg);}
.skew-main{transform: skew(15deg);}
.box02 {
width: 0;
height: 0;
border-top: 100px solid #f44261;
border-right: 100px solid transparent;
}
</style>
</head>
<body>
<div>
<div><div>用css3旋转写平行四边形</div></div>
</div>
</body>
</html>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez faire attention. vers d'autres articles connexes sur le site Web php chinois !

Lecture connexe :

Tutoriel sur l'utilisation de l'attribut word-break en CSS3

Implémentation connexe de l'attribut déformation dans css3 Steps

Étapes pour implémenter l'effet de menu déroulant animé à l'aide de CSS3

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!