<div class="square square--flex">
<div class="content"></div>
</div>
<div class="square square--grid">
<div class="content"></div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: "Exo", Arial, sans-serif;
background-color: #557;
color: #fff;
display: grid;
gap: 30px;
place-content: center;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.square {
justify-self: center;
}
.content {
min-height: 200px;
transition: all 0.2s linear;
}
.square::before,
.square::after {
content: "";
display: flex;
height: 100%;
min-height: 0;
}
:root {
--radius: 20px;
--color: #09f;
}
.square::before,
.square::after {
width: var(--radius);
background-color: var(--color);
}
.square .content {
background-color: var(--color);
}
.square::before {
border-radius: var(--radius) 0 0 var(--radius);
}
.square::after {
border-radius: 0 var(--radius) var(--radius) 0;
}
.square--flex {
display: flex;
}
.square--flex .content {
flex: 1 1 0%;
min-width: 0;
}
.square--grid {
display: grid;
grid-template-columns: var(--radius) auto var(--radius);
}
@property --width {
initial-value: 1px;
inherits: false;
syntax: "<length>";
}
@keyframes square {
to {
--width: 300px;
}
}
.content {
width: var(--width);
animation: square 2s ease infinite alternate;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.