-6
A
回答
11
要麼你使用CSS屏蔽或你CSS3玩變換旋轉:
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
通過說45度-45度,該容器內的圖像直再犯了,你就會轉動一個內部容器。結果是一個對角邊框。添加z-index和絕對定位,並獲得結果。
這是一個演示。
.container {
width: 500px;
height: 200px;
margin: 50px;
overflow:hidden;
position: relative;
border: 2px solid #666;
}
.img1 {
border-right: 2px solid #666;
position: absolute;
width: 300px;
height: 600px;
overflow: hidden;
left: -75px;
top: -230px;
z-index: 2;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.img1 img {
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}
.img2 {
position: absolute;
width: 350px;
overflow: hidden;
left: 150px;
z-index: 1;
}
<div class="container">
<div class="img1"><img src="http://lorempixel.com/output/city-q-c-600-300-7.jpg" /></div>
<div class="img2"><img src="http://lorempixel.com/output/city-q-c-600-300-10.jpg" /></div>
</div>
相關問題
- 1. 這甚至可能嗎?
- 2. 我怎麼能這樣做?它甚至有可能嗎?
- 3. 刮網站 - 這甚至可能嗎?
- 4. NSArray與NSString這甚至可能嗎?
- 5. 這個.htaccess重寫甚至可能嗎?
- 6. Disqus論壇 - 這樣的事情,甚至可能嗎?
- 7. multidimentional ArrayList [] [],它甚至有可能嗎?
- 8. 組合框或?這甚至有可能嗎?
- 9. wordpress後縮略圖裁剪問題。這甚至有可能嗎?
- 10. 這甚至可以用FSM創建嗎?
- 11. 在查詢字符串中轉義'它甚至有可能嗎?
- 12. 在FileMaker中創建「複雜表單」 - 甚至有可能嗎?
- 13. NoClassDefFoundError只有一些設備,只能從playstore?這甚至有可能嗎?
- 14. 這是甚至可以寫
- 15. 獲取SQL視圖輸出爲XML(這是甚至可能嗎?)
- 16. 帶覆蓋圖像的底部DIV - 這甚至可能嗎?
- 17. Express.js動態路由 - 這甚至可能嗎?
- 18. pg_restore抱怨轉儲中的完整性錯誤。這甚至有可能嗎?
- 19. 如何在頁面內製作2頁?這甚至有可能嗎?
- 20. Flash/Actionscript中Request.Form的等價物!它甚至有可能嗎?
- 21. 異步加載.bash_profile中的東西 - 它甚至有可能嗎?
- 22. 推動標準?或者甚至有可能創建這樣的查詢?
- 23. 單元甚至有可能測試RenderMvcController?
- 24. 甚至有可能定製iOS鬧鐘?
- 25. XSLT1.0/XPath 1.0按日期範圍選擇節點。這甚至有可能嗎?
- 26. Recycler Adapter上的Non Recycler Fragment調用方法?這甚至有可能嗎?
- 27. 爲MKMapView添加Overlays以加快速度!這甚至有可能嗎?
- 28. 檢測不同方向的移動。它甚至有可能嗎?
- 29. 使用svn「覆蓋合併」 - 它甚至有可能嗎?
- 30. 從DataReader填充多個數據表。它甚至有可能嗎?
是,其可能的。 – Banana 2014-09-26 08:10:42
謝謝@Banana!剛發佈了一條悲觀的評論。當我看到你的時候刪除它:) – icedwater 2014-09-26 08:11:15
轉換旋轉+溢出隱藏+ z-index – 2014-09-26 08:11:50