I would like to design the image below using HTML and CSS.
And the image below is the output of the code I have implemented.
As you may have noticed, I couldn't place the blue card
on top of the parent card
and move it to the right.
Even though I set the parent to relative
and the child to absolute
, when I move it, it shifts within the parent.
body {
font-family: sans-serif;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}
.card-top {
width: 70%;
height: 10px;
background-color: red;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.card-center {
width: 90%;
height: 300px;
background-color: #fff;
border-radius: 20px;
position: relative;
overflow: hidden;
border-style: solid;
border-color: #FF9696;
padding: 20px;
}
.card-center::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
background-color: red;
z-index: -1;
/*opacity: 0.2;*/
}
.card-center-left {
width: 50px;
height: 150px;
background-color: pink;
position: absolute;
left: 0;
top: 50%;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
transform: translateY(-50%);
}
.card-center-right {
width: 50px;
height: 100px;
background-color: blue;
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
}
.card-bottom {
width: 70%;
height: 10px;
background-color: red;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
<div class="card-top"></div>
<div class="card-center">
<div class="card-center-left"></div>
<div class="card-center-right"></div>
<p>SAMPLE TEXT</p>
</div>
<div class="card-bottom"></div>
Firstly you have to allow overflow on the card so the blue element isn't truncated. Then you can use the combination translation syntax to shift horizontally as well. Note that I modified the card's width to consider this overflow.
:root {
--primaryColor: #E91515;
--secondaryColor: #FF9696;
}
body {
font-family: sans-serif;
margin: 0;
padding-top: 10px;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}
.card-top {
width: 70%;
height: 10px;
background-color: var(--primaryColor);
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.card-center {
width: calc(100% - 100px); /* <------------------------- HERE */
height: 300px;
/* overflow: hidden; <---------------------------------- HERE */
background-color: #fff;
border-radius: 20px;
position: relative;
border-style: solid;
border-color: var(--secondaryColor);
padding: 20px;
}
.card-center::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
background-color: var(--primaryColor);
z-index: -1;
}
.card-center-left {
width: 50px;
height: 150px;
background-color: #FF0000;
position: absolute;
left: 0;
top: 50%;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
transform: translateY(-50%);
}
.card-center-right {
width: 50px;
height: 100px;
background-color: #235396;
position: absolute;
right: 0;
top: 50%;
transform: translate(50%, -50%); /* <------------------------- HERE */
z-index: 999;
border-radius: 10px;
border: 3px solid black;
}
.card-bottom {
width: 70%;
height: 10px;
background-color: red;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
<div class="card-top"></div>
<div class="card-center">
<div class="card-center-left"></div>
<div class="card-center-right"></div>
<p>SAMPLE TEXT</p>
</div>
<div class="card-bottom"></div>