Can anyone help me create a unique CSS shape with a background image? I have provided the code for the shape below:
.figure{
width: 180px;
height: 180px;
border: 1px solid #32557f;
border-radius: 0 50% 0% 50%;
transform: rotate(45deg);
bottom: -50px;
position: relative;
left: 17px
}<div class="figure"></div>When I add a background image, it is affected by the rotation. Here is the updated code:
.figure{
width: 180px;
height: 180px;
border: 1px solid #32557f;
border-radius: 0 50% 0% 50%;
transform: rotate(45deg);
background-size: 100%;
background-image:url('https://images.unsplash.com/photo-1593642634315-48f5414c3ad9');
background-repeat:no-repeat;
bottom: -50px;
position: relative;
left: 17px
}<div class="figure"></div>I have come up with a solution that looks like this:
.figure {
width: 180px;
height: 180px;
border: 1px solid #32557f;
border-radius: 0 50% 0% 50%;
transform: rotate(45deg);
bottom: -50px;
position: relative;
left: 17px;
overflow: hidden;
}
.test{
background-image: url(https://images.unsplash.com/photo-1602000750546-f8e331a082d1);
transform: rotate(-45deg);
height: 145%;
width: 142%;
background-size: cover;
background-repeat: no-repeat;
background-size: 100%;
position: fixed;
top: -43px;
right: -44px;
}<div class="figure">
<div class="test"></div>
</div>Does anybody know what this CSS shape is called?
Thank you!