javascript - 带有圆 Angular css 的三 Angular 形图像？

Question

我尝试在 css 中使用 skew 制作圆 Angular 三 Angular 形，但我得到的结果是这样的..

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

我想创建像 这样的图像三 Angular 形

我应该更改我的 css 什么？或者我在哪里可以用 css 或 javascript 等实现我想要的东西？任何讨论相关的链接？

请帮助。谢谢..

Answer 1

我会制作一张您需要的形状的 PNG 图像，白色用作 mask 。然后将它放在图像顶部的 DIV 中。