http://imageshack.com/a/img560/3302/jojv.jpg
İ have a question for designers! I wanna make index design. i try css divs and php gd library. My css and html.
.arrow-left {
position: relative;
background-image: url(./filmback.jpg);
width: 0;
/* height: 0; */
border-top: 60px solid rgba(173, 10, 10, 1);
border-bottom-style: solid;
border-bottom-color: transparent;
border-right-style: solid;
/* border-left-color: green; */
z-index: 1;
}
.arrow-right {
position: absolute;
background-image: url(./back.jpg);
width: 0;
/* height: 0; */
border-top: 60px solid rgba(173, 10, 10, 1);
border-bottom-style: solid;
border-bottom-color: transparent;
border-left-style: solid;
/* border-left-color: green; */
z-index: 2;
}
and html
<html style="height:100%; margin:0px;">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="./css/720p.css" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
var halfWidth = ($('body').width());
var halfheight = ($('body').height());
$('#div2').css('border-top-width', '0px');
$('#div2').css('border-left-width', halfWidth + 'px');
$('#div2').css('border-bottom-width', halfheight + 'px');
$('#div2').css('border-right-width', halfWidth + 'px');
$('#div1').css('border-bottom-width', '0px');
$('#div1').css('border-right-width', halfWidth + 'px');
$('#div1').css('border-top-width', halfheight + 'px');
$('#div1').css('border-left-width', halfWidth + 'px');
});
</script>
</head>
<body style="height:100%; margin:0px;">
<div class="arrow-right" id="div2"></div>
<div class="arrow-left" id="div1" ></div>
</body>
</html>
first and second div look perfect. But div2 on div1 and div2 background not show. i try php gd too but i dont it because gd is need perfect math! My math is sucks. How can i this? i think make this very simple but if u dont know how this is very hard! Thanks for helps!
You can do this with some basic HTML and CSS:
HTML
<div id="container">
<div id="a"></div>
<div id="b"></div>
</div>
CSS
#a {
border-width: 200px 200px 0 0;
border-color: #f00 transparent transparent transparent;
}
#b {
border-width: 0 0 200px 200px;
border-color: transparent transparent #00f transparent;
}
#a, #b {
position:absolute;
width: 0px;
height: 0px;
border-style: solid;
}
#container {
position:relative;
}