Exercise 2: Shapes

I experimented with these techniques from Chapter 3

A Diamond Images

.diamond-image {
width: 250px;
clip-path: polygon(50% 0, 100% 50%,
50% 100%, 0 50%);
margin-left: 35px;
}

B Curved cutout borders

.cutout {
background: url("images/37.png");
background: radial-gradient(circle
at top left, transparent 15px,
#db2748 0) top left,
radial-gradient(circle at top
right, transparent 15px,
#db2748 0) top right,
radial-gradient(circle at bottom
right, transparent 15px,
#db2748 0) bottom right,
radial-gradient(circle at bottom
left, transparent 15px,
#db2748 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
padding: 1em 1.2em;
width: 250px;
height: 150px;v margin-left: 40px;
}

C Pie chart

.pie {
width: 150px; height: 150px;
border-radius: 50%;
background: rgba(219, 39, 72, 1);
background-image: linear-gradient(to right, transparent 50%,
rgba(76, 83, 96, 1) 0);
margin-left: 90px;
}

.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 3s linear infinite, bg 6s step-end infinite;
}

@keyframes spin {
to { transform: rotate(.5turn); }
}
@keyframes bg {
50% { background: rgba(76, 83, 96, 1); }
}