以特定形状显示图像

Question

我正在研究离子项目。我为我的应用程序设计了我的设计。现在是时候在我的CSS中实现它了。但我想知道如何让我的形象呈现出某种形状。为了更好地理解我的意思，看看我的形象：

我想创建这一点，但不知道最好的方法是去了解这个东西。

任何帮助/建议是欢迎

Answer 1

你可以使用覆盖股利和其样式，像这样创造的角度：

https://jsfiddle.net/o6mvas5o/

但这是假设你不会需要有内容覆盖三角形

<div class="container"> 
    <div class="mattdamon"></div> 
    <div class="overlayTriangle"></div> 
</div> 

.container{ 
    width:200px; 
    height:400px; 
    background:grey; 
    position:relative; 
} 
.mattdamon{ 
    background:red; 
    width:100%; 
    height:200px; 
} 
.overlayTriangle{ 
    position:absolute; 
    top:120px; 
    width:0; 
    height:0; 
    border-style:solid; 
    border-width:40px 100px; 
    border-color:transparent grey grey transparent; 
}