使用css倾斜斧头

时间：2015-09-08 13:43:15

标签： html5 css3

我想做一个＆＃34;分裂＆＃34;在我的网站上使用＆＃34;倾斜＆＃34;斧头。我尝试将其与基本HTML，transform和rotate的CSS一起使用，但我无法获得正确的结果。我尝试得到这样的东西： enter image description here

但是，旋转属性对于此

来说并不是最好的

另一个CSS attribut可以给我预期的结果吗？或者你有任何好的tuto？谢谢。

我目前无效：

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slanting axe</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="test" class="col-lg-12">
    <div id="red" class="col-lg-6">
    </div>
    <div id="blue" class="col-lg-6">
    </div>
</div>
</body>
<script src="Scripts/bootstrap.min.js"></script>
</html>

CSS 

#test{
height:500px;
}

#red{
height:500px;
background-color:red;
transform-origin: 50% 50%;
transform: rotate(-30deg);
}

#blue{
height:500px;
background-color:blue;
transform-origin: 50% 50%;
transform: rotate(-30deg);
}

0 个答案:

没有答案
相关问题
最新问题