This Idea Inspired By Kevin Powell’s Videos https://www.youtube.com/watch?v=khjVPkO35F0 —————— Click For More …
source
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Inverted Border Radius Card</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="card"> <div class="imgBx"></div> <div class="content"> <span class="price"> <a href="#">$1,000,000</a> </span> <ul> <li>Somewhere</li> <li>1200sqm</li> <li>House</li> </ul> </div> </div> </body> </html>
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #282828;
}
.card
{
position: relative;
width: 320px;
height: 400px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card .imgBx
{
position: relative;
width: 100%;
height: 240px;
background: #f00;
border-radius: 15px;
background: url(img.jpg);
background-size: cover;
}
.card .imgBx::before
{
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 20px;
height: 20px;
background: transparent;
border-radius: 50%;
box-shadow: -10px 10px 0 #282828;
}
.card .imgBx::after
{
content: '';
position: absolute;
bottom: 70px;
left: 0;
width: 20px;
height: 20px;
background: transparent;
border-radius: 50%;
box-shadow: -10px 10px 0 #282828;
}
.card .content
{
position: relative;
width: 100%;
height: 150px;
background: #fff;
border-radius: 15px;
border-top-left-radius: 0;
padding: 0 35px;
}
.card .content ul
{
color: #333;
}
.card .content .price
{
position: absolute;
top: -80px;
left: 0;
height: 80px;
width: 50%;
background: #fff;
border-top: 10px solid #282828;
border-right: 10px solid #282828;
border-top-right-radius: 25px;
}
.card .content .price::before
{
content: '';
position: absolute;
width: 25px;
height: 25px;
background: transparent;
border-radius: 50%;
box-shadow: -10px -10px 0 #282828;
}
.card .content .price::after
{
content: '';
position: absolute;
bottom: 0;
right: -25px;
width: 25px;
height: 25px;
background: transparent;
border-radius: 50%;
box-shadow: -10px 10px 0 #fff;
}
.card .content .price a
{
position: relative;
background: #333;
padding: 10px 20px;
margin: 15px 15px;
display: block;
border-radius: 7px;
color: #fff;
font-weight: 600;
text-decoration: none;
}
