我正在一個項目中，該項目需要兩個三角形來保存背景圖像并成為鏈接。這是我模擬兩個三角形的方式。三角形與背景圖像目前，我只有兩個div，它們跨越900x600，每個三角形都作為背景圖像。我現在遇到的問題是我無法將鼠標懸停在Cinema div的透明部分上才能到達photo div。我可以使用css3三角形完成此設計并設置其背景圖像嗎？我一直認為自定義形狀是由邊框和邊框顏色組成的。是否可以使用css3三角形，如果可以，有人可以幫助我編寫代碼嗎？這是我目前擁有的。.pageOption { position: relative; width: 900px; height: 600px;}.pageOption .photo { position: absolute; top: 0px; left: 0px; width: 900px; height: 600px; background: url('../images/menuPhoto.png') no-repeat 0 0;}.pageOption .cinema { position: absolute; bottom: 0px; right: 0px; width: 900px; height: 600px; background: url('../images/menuCinema.png') no-repeat 0 0;}<div class="pageOption"> <a href="#" class="option photo" id="weddingPhoto"></a> <a href="#" class="option cinema" id="weddingCinema"></a></div>
3 回答
森林海
TA貢獻2011條經驗 獲得超2個贊
這是我的CSS建議：
使用的是HTML5標簽而不是跨瀏覽器的畫布。
使用SVG。（最可靠的一個）
使用CSS3旋轉過渡，并用隱藏的溢出將其覆蓋。再次是不跨瀏覽器。
旋轉過渡：
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome
-moz-transform: rotate(7.5deg); /* FF3.5+
-ms-transform: rotate(7.5deg); /* IE9
-o-transform: rotate(7.5deg); /* Opera 10.5
transform: rotate(7.5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9
M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
- 3 回答
- 0 關注
- 723 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消