带圆角css的三角形图像？

Question

我尝试使用skew中的css创建带圆角的三角形，但我得到的结果是这样的..

我的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中。