http://imageshack.com/a/img560/3302/jojv.jpg
© 有一个问题要问设计师!我想做索引设计。我尝试 css div 和 php gd 库。我的 CSS 和 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;
}
和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>
第一个和第二个 div 看起来很完美。但是 div1 和 div2 背景上的 div2 不显示。我也尝试使用 php gd，但我没有尝试，因为 gd 需要完美的数学!我的数学很烂。我怎么能这样？我认为这很简单，但如果你不知道这有多难!感谢您的帮助!
最佳答案
您可以使用一些基本的 HTML 和 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;
}
关于javascript - html css 或 php gd 库两个图像合并 Angular 到 Angular ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21582326/