====== 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) :
<code css>clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
background-color: blue;
</code>

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 :

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

<code css>
.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;
}
</code>

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

<code>
.class {
  color:black;
  @media (prefers-color-scheme: dark) {
    /* oui même les media */
  }
  h1 {
    color:red;
    .main {
      color:blue;
    }
  }
}
</code>
===== Voir aussi =====
  * [[http://warriordudimanche.net/article1511/6087b35bec833|Source chez Bronco]], et plus de trucs mais qui ne me servent pas


{{tag>CSS}}

[[https://creativecommons.org/publicdomain/zero/1.0/deed.fr|{{ https://liev.re/imagesweb/licences/cc-zero.png?100 | Ce texte est placé sous licence CC0}}]]