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等实现我想要的?任何链接讨论这个?
请帮忙。谢谢。。