Comment créer une forme avec un côté incliné et des coins arrondis de l'autre côté?

Question

Est-il possible de créer cette forme en CSS3? Comment? Je suis bloqué: http://dabblet.com/gist/2962169

h1 {
  background-color: #434b82;
  border-radius: 20px 0 0 20px;
  transform: skew(-20deg);
}

TEST

Answer 1

Vous voulez dire quelque chose comme ceci

h1 {
    background-color: #434b82;
    border-radius: 20px 0 0 20px;
    width:500px;
    height:40px;
    border-right: 40px solid transparent;
}
h1:after{
    position:absolute;
    width: 80px;    
    border-top: 40px solid #434b82;
    margin-left:500px;
    border-right: 20px solid transparent;
    content:"";
}

​

Answer 2

Nous pouvons utiliser linear-gradient() pour dessiner cette forme sur un élément rectangulaire.

Cette astuce repose sur l'idée de diviser la forme en deux parties puis de dessiner chaque partie sur l'arrière-plan de manière indépendante.

div {
  background-image: linear-gradient(to left, #434b82, #434b82),
                    linear-gradient(to left top, transparent 50%, #434b82 50%);
  background-position: top right 20px, 100% 100%;
  background-size: 100% 100%, 20px 100%;
  background-repeat: no-repeat;
}

div {
  background-image: linear-gradient(to left, #434b82, #434b82),
                    linear-gradient(to left top, transparent 50%, #434b82 50%);
  background-position: top right 20px, 100% 100%;
  background-size: 100% 100%, 20px 100%;
  background-repeat: no-repeat;
  border-radius: 30px 0 0 30px;
  line-height: 50px;
  padding: 0 25px;
  height: 50px;
  width: 200px;
  color: #fff;
}

    Un peu de texte ici...