Implementierungsschritte zum Schreiben eines Parallelogramms mit CSS3-Code-CSS-Tutorial-php.cn

Implementierungsschritte zum Schreiben eines Parallelogramms mit CSS3-Code

php中世界最好的语言

Freigeben： 2017-11-30 11:16:36

Original

2708 Leute haben es durchsucht

Wir wissen, dass Sie, wenn Sie CSS3 zum Erstellen eines Rotationseffekts verwenden möchten, das Transformationsrotationsattribut von CSS3 verwenden müssen, um ihn auszuschreiben. Die Syntax lautet transform: skew. Lassen Sie uns als Fallstudie ein gedrehtes Viereck für alle erstellen. Interessierte können es selbst tun.

Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Bitte achten Sie darauf zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Tutorial zur Verwendung des Wortumbruch-Attributs in CSS3

Schritte zum Implementieren eines animierten Dropdown-Menüeffekts mit CSS3

Das obige ist der detaillierte Inhalt vonImplementierungsschritte zum Schreiben eines Parallelogramms mit CSS3-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!