créer des formes avec css

Question

.shape {
    width: 200px;
    height: 50px;
    background-color: green;
    border-radius: 10px 10px 0 30px;
    transform: skewX(0);
}

<div class="shape">Hello World!</div>

Nous avons deux formes suivantes dans jpg format. Mais dans certaines conditions, la couleur de l'arrière-plan et de la bordure doit être modifiée. L'idée est donc de créer ces images avec la propriété de transformation CSS (si possible).

{   width: 200px;
    height: 50px;
    background-color: green;
    border-radius: 10px 10px 0 30px;
    transform: skewX(0);
}