以特定形状显示图像

Question

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

我正在努力创造这个，但不确定最好的方法是做什么。

欢迎任何帮助/建议

Answer 1

您可以使用重叠div创建角度，并将其设置为：

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;
}