clip-path - one of my favorite CSS propertirs.
With clip-path web developers could make element has different appearance.
It just likes ADOBE - Photoshop's alpha channel, could apply mask effect on elements.
Web developers could apply it by different methods. Such as polygon、path.
That means web developers could easy apply designers' complicated design on web page.
The following element adopted clip-path > polygon、path for overlay & signs.
You can change the looks by adjusting color pickers.
Style setting
Here comes clip-path > polygon、path usage.
<style>
.overlay {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 170px 100%);
}
.checkmark {
clip-path: path(evenodd, 'M33.364 14.61a2.098 2.098 0 0 0-2.962 0L18.03 26.954l-4.446-4.432a2.094 2.094 0 0 0-2.962 0 2.085 2.085 0 0 0 0 2.954l5.926 5.912a2.1 2.1 0 0 0 2.964 0l13.852-13.822a2.087 2.087 0 0 0 0-2.956zM0 22c0 12.15 9.85 22 22 22s22-9.85 22-22S34.15 0 22 0 0 9.85 0 22z');
}
.dollar-sign {
clip-path: path(evenodd, 'M12.542 5.708v1.169c.47.075.853.23 1.151.465.298.235.583.595.853 1.08l-1.163.65c-.35-.636-.807-.954-1.372-.954-.35 0-.64.103-.871.31a.998.998 0 0 0-.346.776c0 .282.093.517.28.704.183.183.553.4 1.11.65a11.1 11.1 0 0 1 1.193.617c.314.193.55.38.71.558.45.485.674 1.072.674 1.76 0 .676-.203 1.273-.608 1.79-.402.513-.94.859-1.611 1.038v1.235h-1.044v-1.2c-.78-.127-1.374-.395-1.784-.805-.41-.41-.712-1.042-.907-1.897l1.313-.274c.179.604.397 1.036.656 1.294.27.247.63.37 1.08.37.437 0 .803-.141 1.097-.423.29-.279.436-.639.436-1.08 0-.394-.121-.71-.364-.949a3.366 3.366 0 0 0-.546-.39 9.355 9.355 0 0 0-.922-.475c-.771-.346-1.278-.664-1.52-.954a2.262 2.262 0 0 1-.58-1.557 2.185 2.185 0 0 1 .534-1.47c.173-.202.387-.376.642-.523.254-.147.543-.263.865-.346v-1.17h1.044zM11.6 2C6.306 2 2 6.306 2 11.6s4.306 9.6 9.6 9.6 9.6-4.306 9.6-9.6S16.894 2 11.6 2zm0 17.455c-4.33 0-7.855-3.524-7.855-7.855 0-4.33 3.524-7.855 7.855-7.855 4.33 0 7.855 3.524 7.855 7.855 0 4.33-3.524 7.855-7.855 7.855z');
}
.heart {
clip-path: path('M21.34 3.77C20.252 2.63 18.804 2 17.263 2 15.63 2 14.206 2.44 12 5.022 9.764 2.41 8.34 2 6.735 2c-1.543 0-2.99.63-4.075 1.77-2.214 2.327-2.214 6.115 0 8.443L12 22l9.34-9.79c2.212-2.325 2.212-6.113 0-8.44');
}
</style>