html css或php gd庫兩個圖像合併轉角到角落

http://imageshack.com/a/img560/3302/jojv.jpg html css或php gd庫兩個圖像合併轉角到角落

©對設計師有問題！我想做索引設計。我嘗試css divs和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看起來很完美。但div2上div1和div2背景不顯示。我也嘗試php gd，但我不這樣做，因爲gd需要完美的數學！我的數學很糟糕。我怎麼能這樣？我認爲這樣做很簡單，但如果你不知道這是非常困難的！感謝您的幫助！

來源

2014-02-05 Batuhan Topbaş

你可以用一些基本的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; 
}

jsFiddle example

來源

2014-02-05 17:51:29 j08691

感謝您的幫助。我做的。但我不使用純色。我需要這個使用2圖像。不是純色。兩個不同的圖像。 –

html css或php gd庫兩個圖像合併轉角到角落

回答

相關問題