帶有圓角css的三角形圖像？

Question

我試圖在css使用skew來制作帶有圓角的三角形，但是我得到這樣的結果。

我的CSS代碼是：

<style>
body {
    margin:0;
    padding:220px 40px;
    font:80% Arial, Helvetica, sans-serif;
}         

img{border:none;}

/* angled box styles */

.boxasli{
    height:200px;  
    width:200px;
    margin-top:300px;
    overflow:hidden;
    -ms-transform:skewX(-60deg); /* IE 9 */
    -moz-transform:skewX(-60deg); /* Firefox */
    -webkit-transform:skewX(-60deg); /* Safari and Chrome */
    -o-transform:skewX(-60deg); /* Opera */
    transform:skewX(-60deg);

    -ms-transform:skewY(40deg); /* IE 9 */
    -moz-transform:skewY(40deg); /* Firefox */
    -webkit-transform:skewY(40deg); /* Safari and Chrome */
    -o-transform:skewY(40deg); /* Opera */
    transform:skewY(40deg);

}
.boxasli img {
    height: 225px;
    width: 225px;

    -ms-transform:skewY(-20deg); /* IE 9 */
    -moz-transform:skewY(-20deg); /* Firefox */
    -webkit-transform:skewY(-20deg); /* Safari and Chrome */
    -o-transform:skewY(-20deg); /* Opera */
    transform:skewY(-20deg);

    -ms-transform-origin: 100% 100%; /* IE 9 */
    -webkit-transform-origin: 100% 100%; /* Safari and Chrome */
    -moz-transform-origin: 100% 100%; /* Firefox */
    -o-transform-origin: 100% 100%; /* Opera */
    transform-origin: 100% 100%;
}

</style>

和html：

<div class="boxasli">
   <img src="images/portfolio/p02.jpg" alt="bike" />
</div>   

我想創建像三角形的圖像

我應該如何更改css ？或者在哪里可以用CSS或javascript等實現我想要的？任何鏈接都對此進行了討論？

請幫助。謝謝..

Answer 1

我將根據需要的形狀制作PNG圖像，以白色作為遮罩。 然后將其放在圖像頂部的DIV中。