我创建了一个简单的布局,其中有三个div相互作用.一个是屏幕中间的徽标,另一个是两个块,jQuery被移出屏幕.我使用skewCSS中的选项来应用学位转换.我想根据屏幕应用一定程度,所以这个学位将适用于所有屏幕.
可视化示例:http://jsfiddle.net/6a93T/1/
现在我有这个代码:
HTML:
<html>
<header>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jq.animation.js"></script>
</header>
<body>
<div id="preloader">
<div id="blocktop"></div>
<div id="logo"></div>
<div id="loadline"></div>
<div id="blockbottom"></div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
CSS:
html{
overflow: hidden;
}
#preloader{
width: 100%;
height: 100%;
}
#logo{
background-image: url('../img/logotest.png');
width: 300px;
height: 300px;
display: block;
position: fixed;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
z-index: 1000;
}
#blocktop{
background-color: #fff4ed;
width: 100%;
height: 100%; …Run Code Online (Sandbox Code Playgroud) 我正在开发一个响应式Web应用程序,需要创建两个单独的内容区域,如下所示,
到目前为止,我试过,
border-right: 30px solid transparent;
border-bottom: 30px solid #4c4c4c;
height: 100%;
width: 100%;
position: fixed;
Run Code Online (Sandbox Code Playgroud)
但是,遗憾的是无法创建一个三角形.
有没有其他方法可以使用CSS创建一个三角形,除了使用border属性之外还可以将内容完全包装在div中?
任何帮助将不胜感激.