Heim > Artikel > Web-Frontend > Implementierungsschritte zum Schreiben eines Parallelogramms mit CSS3-Code

Implementierungsschritte zum Schreiben eines Parallelogramms mit CSS3-Code

php中世界最好的语言Original: 2017-11-30 11:16:362618Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Tutorial zur Verwendung des Wortumbruch-Attributs in CSS3Nächster Artikel：Tutorial zur Verwendung des Wortumbruch-Attributs in CSS3

In Verbindung stehende Artikel

Mehr sehen