<div class="card">
<div class="card__body">
<div class="card__title">Единство стиля</div>
<div class="text">гармоничное сочетание ворот с фасадом дома</div>
</div>
</div>
body {
background: linear-gradient(135deg, green, blue) no-repeat;
background-size: 100%;
min-height: 100vh;
padding: 1rem;
}
.card {
background: #fff;
max-width: 90%;
width: 300px;
font-size: 20px;
border-radius: 0 0 30px 0;
padding: 16px;
box-shadow: 0 0 0 16px white inset, 0 0 0 18px red inset;
&__body {
padding: 16px;
background: linear-gradient(185deg, #fff, #fff 35%, transparent);
position: relative;
&::after {
content: '';
width: 20px;
height: 20px;
border-radius: 100px;
background: red;
position: absolute;
right: -9px;
top: 40%;
}
}
&__title {
font-weight: bold;
margin-bottom: 1rem;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.