css 实现平行四边形

css 实现平行四边形

<!DOCTYPE html>

<html>

<head> <meta charset="UTF-8"> 

<title>平行四边形</title> 

<style type="text/css">  

.parallelogram {   

width: 200px;   

height: 120px;   

transform:skew(-30deg); /*设置倾斜度为-30*/   

-webkit-transform: skew(-30deg);   

-moz-transform: skew(-30deg);   

-o-transform:skew(-30deg);   

-ms-transform:skew(-30deg);   

background-color: red;   margin: 50px auto; 

}

</style>

</head>

<body> 

<div class="parallelogram"></div>

</body>

</html>

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注