Как можно скрыть угол блока за квадратом?
.App__catCard {
position: relative;
padding-top: 21px;
padding-left: 48px;
width: 320px;
height: 480px;
color: black;
border-radius: 10px;
border: 4px solid #1698D9;
background-color: white;
background-image: url('/src/image/cat.png');
}
.App__catCard::before {
display: block;
content: '';
width: 70px;
height: 60px;
background-color: #1698D9;
border-right: 4px solid #1698D9;
position: absolute;
top: -35px;
left: -40px;
transform: rotate(45deg);
overflow: hidden;
}
.App__catCard h3{
font-family: 'Trebuchet MS';
font-style: normal;
font-weight: 700;
font-size: 48px;
line-height: 56px;
}
.App__catCard h4{
text-align: left;
font-family: 'Trebuchet MS';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 28px;
margin-bottom: 15px;
}
.App__catCard p{
color: #666666;
font-family: 'Trebuchet MS';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
}
.App__weight {
padding-top: 20px;
width: 80px;
height: 80px;
position: absolute;
background-color: #1698D9;
border-radius: 50%;
color: white;
text-align: center;
right: 16px;
bottom: 16px;
}
.App__weight p{
font-family: 'Trebuchet MS';
font-style: normal;
font-weight: 400;
font-size: 42px;
line-height: 20px;
color: white;
}
.App__weight span{
display: inline-block;
margin-top: 8px;
font-family: 'Trebuchet MS';
font-style: normal;
font-weight: 400;
font-size: 22px;
line-height: 22px;
}
Без транспарент:
С транспарент:
