Rectangle with triangular bottom in css [duplicate] - html

Question

This question already has answers here:
Responsive CSS triangle with percents width
(7 answers)
Closed 6 months ago.
I need to create the following form in CSS I tried it with after but I can't get the same result, can someone help me please.
Shape
.login-card{
position: absolute;
width: 394px;
height: 682px;
left: calc(50% - 394px/2);
top: 64px;
/* surface */
background: #FFFFFF;
/* 04 dp */
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.login-card:after {
content: "";
position: absolute;
top: 100%;
width: 60px;
height: 0;
border-style: solid;
border-width: 86px 197px 0 197px;
border-color: red transparent transparent transparent;
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
}
<div class="login-card">
</div>

Answer 1

You could use a combination of clip-path and calc() to create the shape in the main element and use some padding to prevent content from falling into the triangle shape.
The main issue with this approach is the loss of the box-shadow when using clip-path but this can be fixed using CSS filters, as per this article: https://css-tricks.com/using-box-shadows-and-clip-path-together/
Here's this approach in action on your example:
.login-card {
--triangle-size: 100px;
position: absolute;
width: 394px;
height: 682px;
left: calc(50% - 394px/2);
top: 64px;
background: #fff;
border-radius: 10px 10px 0 0;
padding-bottom: var(--triangle-size);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--triangle-size)), 50% 100%, 0 calc(100% - var(--triangle-size)), 0 0);
}
/** Restore the shadows */
.login-card-wrap {
filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12)) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
}
<div class="login-card-wrap">
<div class="login-card"></div>
</div>

Answer 2

Use clip-path and filter instead of box-shadow on the parent and it will follow the shape.
.login-card {
position: relative;
width: 394px;
height: 682px;
left: calc(50% - 394px/2);
top: 64px;
/* surface */
background: #FFFFFF;
/* 04 dp */
filter: drop-shadow(0px 1px 5px rgba(50, 50, 0, 0.5));
border-radius: 10px 10px 3px 3px;
}
.login-card:after {
content: "";
position: absolute;
top: 100%;
background: #fff;
width: 100%;
height: 100px;
clip-path: polygon(0 0, 48% 100%, 99% 0);
}
<div class="login-card"></div>