CODEWITHSUNDEEP
cssionic-framework
GY22
GY22

Reputation: 785

Display an image in a certain shape

I am working on an Ionic project. And I have made my design for my app. Now its time to implement it in my css etc. But I was wondering how to go about making my image take on a certain shape. To better understand what I mean, have a look at my image:

enter image description here

I am trying to create this but not sure what the best way is to go about this.

Any help/advise is welcome

Upvotes: 2

Views: 76

Answers (1)

Hacktisch
Hacktisch

Reputation: 1514

You could create the angle using an overlaying div and styling it like so:

https://jsfiddle.net/o6mvas5o/

But this assumes you will not need to have content in the overlay triangle

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

Upvotes: 3

Related Questions