Q
繪圖圓潤與CSS
0
A
回答
6
div {
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-o-transform: rotate(45deg); /* Opera */
-moz-transform: rotate(45deg); /* Firefox */
background-color:green;
width:100px;
height:100px;
position:absolute;
top:20px;
left:-50px;
-webkit-border-radius: 0 20px 0 0;
-moz-border-radius: 0 20px 0 0;
border-radius: 0 20px 0 0;
}
and the fiddle。
如果你想顯示在舊的瀏覽器也會正確帶圓角的股利不CSS3 suppport,使用此:
搶用PRINTSCREEN鍵屏幕,粘貼到塗料程序,縮小邊界並保存,在IrfanView中打開並另存爲(轉換爲)透明PNG,然後將其轉換爲Base64圖像here,抓住你的結果,你的CSS就完成了。這裏的結果:
div.image {
position: absolute;
width: 62px;
height: 141px;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAACNCAIAAABg/V7IAAAABnRSTlMA/wD/AP83WBt9AAADSElEQVR42tXdz0sbQRQH8LejhNYExIisWFtDxR4KJhdDFMUfBU8KVqkXtfkj/E+8CxK96KlexARzTw/SXgu1Xirx3hSEpsn2sKWipNnd2fnxvt/jnj48Zt48GJZxPM8jzPQk3yRnx2Yh6ReZi/5E/8zzGTw6LVLlujLwZGB6dBqPTkTlb+XBvsHCswIenYjOr86x9Pd0OP0Duq9PP00XRgt4dCIqX5Uh9B3oKPrOdF/vptz8SB6PTkRnX88467vRmesD6Jz1wXS2+lB0nvqwdIb6CHRu+mh0VvrIdD56GToTvSSdg16ebl0fi25XH5duUa+Abkuvhu7rh1PDUyNTeHTzepV0w3rFdJN69XRjei10Mz1HF92AXiNdt14vXateO12f3gRdk94QXYfeHF253ihdrd40XaHeAl3VpGCHrkRvjR5fb5MeU2+ZHkdvny6tZ0GX03OhS+gZ0aPqedEj6dnRw+s50kPqmdLD6PnSA/Ws6d313Om+fjw9nnNzj74LQkjxQ/H0yykknYg2TjYu65eQdI+8teO1u993SGv9Xxq/Gs12c/nlMljV/ex93Lv9eYtXdSJqea1kIrmUWcKrOhHtf9pveS1Ier1Rr32vQdKJqHpdRaXXbmp429RPs93Mj+Qhq37z4wZ1wbS9Niod8jSFp6cSKVT6RHoClZ51s3Mv5iDpC5kFyKr3it7VV6uQ9Pmx+aG+IUj67swuZHPMubmViRU8eo/TU3lfwTuShCOqxaqbdMHowhHH744XM4tgg4BwxNH60ebrTbAZRjjiYO1ga3KrQ4Nn7i69Le1kd8Amx+5uvvRAN1N6GDdHekg3O3p4Ny96JDcjelQ3F7qEmwVdzm2fLu22TI/jtkmP6bZGj++2Q1fitkBX5TZNV+g2SlfrNkdX7jZE1+E2Qdfk1k7X59ZL1+rWSNft1kU34NZCN+NWTzfmVkw36VZJN+xWRjfvVkO34lZAt+WOS7fojkW365anW3dL0jm4ZehM3BT1Gkw44nD9cHtymxhEgLoj0Lm5w9IZukPRebqD6WzdAXTO7m505u7/0vm7O9Mh3B3oKO7HdCD3AzqW+54O5/5LR3QTkfDnbzg3EVHpc8nDjIP7EAvwbyZ/AAASPZZ53XMTAAAAAElFTkSuQmCC');
z-index:-1;
}
3
您可以使用CSS轉換:
.arrow-right {
width: 0;
height: 0;
position: relative;
top: 26px;
left: -60px;
border: 60px solid green;
border-top-right-radius: 15px;
-webkit-transform:rotate(45deg);
}
我的小提琴需要一個Webkit的瀏覽器如Safari或Chrome,但你可以爲其他瀏覽器使用不同的前綴和IE的過濾器屬性:http://davidwalsh.name/css-transform-rotate
+0
太好了! – Stano 2012-08-11 10:24:28
相關問題
- 1. 繪圖與CSS
- 2. 的iOS NSAttributedString圓潤與色彩
- 3. 圓潤imageview的圖像從網頁
- 4. 橢圓繪圖
- 5. Dynamodb range_key得到的圓潤
- 6. 製作圓潤的LinearLayout
- 7. 圓潤controlgroup手風琴
- 8. 不會回顯圓潤數
- 9. Surfaceview截圖與線/橢圓繪製它
- 10. 章節劃分與使用權幾分圓潤箭頭CSS邊框
- 11. CSS圓與內圈和圖像
- 12. OpenGL圓形繪圖變橢圓
- 13. Css圓形圖像
- 14. 繪製圖像或繪製實心圓?
- 15. 使用繪圖儀繪製圓形
- 16. 用純CSS繪製超橢圓形
- 17. 繪圖無圓形梯度
- 18. 故障繪圖嵌套圓
- 19. 圓弧上的繪圖點
- 20. Windows Phone繪圖橢圓
- 21. 圓形繪圖算法
- 22. flex中的繪圖圓
- 23. KineticJS繪製圖像的圓
- 24. Android Map v2繪圖橢圓
- 25. 繪製一個圓形陰影的方形元素與CSS
- 26. 貨幣過濾器,只有圓潤
- 27. Android的XML圓潤剪切的邊角
- 28. 縮放圓潤使用CSS3和動畫()
- 29. 設置UIImageView的圓潤與AFNetworking setImageWithURL角落:
- 30. 的UIImage與左側的MonoTouch iPhone圓潤的邊角
擊敗我11秒! – Zade 2012-08-11 10:12:06