1

skew我尝试使用in制作带圆角的三角形，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等实现我想要的？任何链接讨论这个？

请帮忙。谢谢。。

4

1 回答 1

0

我会制作一个你需要的形状的PNG图像，用白色作为蒙版。然后将它放在图像顶部的 DIV 中。

于 2013-06-29T01:36:16.707 回答