Astuce CSS

Pour faire une ombre sur des images à fond transparent : filter:drop-shadow(2px 4px 8px #585858); Oui ça marche même sur les formes bizarres.
Centrer horizontalement et verticalement, vive flex :.center { display: flex; align-items: center; justify-content: center; }

Formes

Un joli hexagone autour d'un élément (ou tout seul) :

clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
background-color: blue;

Une barre avec un bout tronqué… non, pas clip-path. J'ai essayé mais ça ne donne rien de bon. Le mieux c'est de faire une div vide et de la styliser avec du CSS :

<div class="khbiseau_topright_color"></div>
<div class="khbiseau_bottom_color"></div>
<div class="khbiseau_right_color"></div>

.khbiseau_topright_color {
	border-style: solid;
	border-color: transparent transparent violet transparent;
	border-width: 0 1em 1em 0;
}
 
.khbiseau_bottom_color {
	border-style: solid;
	border-color: violet transparent transparent transparent;
	border-width: 0.5em;
	padding: 0;
	background-color: transparent !important;
	}
 
.khbiseau_right_color {
	border-style: solid;
	border-color: transparent transparent violet violet;
	border-width: 1.5em 0em 1.5em 1.5em;
	height: 100%;
	position: absolute;
	right: 0;
}

Imbriquer

Et bien… il suffit de le faire, plus besoin de SASS etc.

.class {
  color:black;
  @media (prefers-color-scheme: dark) {
    /* oui même les media */
  }
  h1 {
    color:red;
    .main {
      color:blue;
    }
  }
}

Voir aussi

Source chez Bronco, et plus de trucs mais qui ne me servent pas

CSS