带圆角的css三角形图像？

我已经尝试使用cssskew，以与圆角三角形，但我得到导致这样的..带圆角的css三角形图像？

enter image description here

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

我想创建图像三角形形状，如 enter image description here

我该怎么改变我的css？或者我可以在哪里用css或javascript等实现我想要的？任何链接都会讨论这个问题？

请help.thanks ..

来源

2013-06-24 ltvie

您可以使用CSS属性'clip'来实现这一点。这里是关于这个主题的文章。 http://www.html5rocks.com/en/tutorials/masking/adobe/ – eazimmerman

你想要做的是使用'border-radius'无法实现的。而使用'skew'则是远离光束。根据您需要的浏览器支持，“clip”可能适用于您。除此之外，SVG可能是一个很好的解决方案。 – Spudley

这里有一个我的老dabblet分叉：http://dabblet.com/gist/5855089边界半径的行动。代码并不是第一次被认为是圆角。它可以存档恕我直言:) –

我会让你的需要，在白色工作作为掩模形状的PNG图像。然后将它放在图像顶部的DIV中。

来源

2013-06-29 01:36:16

带圆角的css三角形图像？

回答

相关问题