CSS pour l'inclinaison du coin incurvé d'un DIV

Question

Comment y parvenir <div> de CSS :

Ma tentative :

div {
    height: 300px;
    background: red;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    border-top: 80px solid white;
    border-right: 80px solid red;
    width: 0;
}

Je ne parviens pas à modifier la section de la pente et à remplir l'intérieur de blanc.

Answer 1

Ma tentative, telle que publiée dans les commentaires ( http://jsfiddle.net/8Zm96/ ) :

div{
    width: 300px;
    height: 280px;
    background: #fff;
    border: solid 1px red;
    border-width: 0 1px 1px 1px;
    border-radius: 4px;
    margin-top: 40px;
    position: relative;
}

div:before{
    content: '';
    position: absolute;
    top: -20px;
    right: -1px;
    border: solid 1px red;
    border-width: 1px 1px 0 0;
    border-radius: 25px 4px 0 0;
    height: 24px;
    width: 250px;
    background: #fff;
}

div:after{
    content: '';    
    position: absolute;
    top: -20px;
    left: 2px;
    border: solid 1px red;
    border-width: 0 0 1px 0;
    border-radius: 0 0 20px 0;
    height: 20px;
    width: 55px;
    background: #fff;
}

Avec un zoom rapproché, le coin gauche ne tient pas et les deux demi-courbes se superposent, mais rien de tout cela n'est visible avec un zoom normal. Cela peut poser un problème pour les téléphones et les écrans à haute résolution, qui peuvent afficher le contenu avec un zoom avant, ou plus précisément avec un zoom normal.

Answer 2

C'est mon meilleur essai : http://jsfiddle.net/2y7TB/2/

Voici ce que j'ai utilisé :

Je ne l'ai testé que sur Chrome, si vous l'aimez et que vous voulez une solution cross-browser, n'hésitez pas à demander :)

LE : Semble également s'afficher correctement sur les dernières versions de Firefox et d'Opera.

.tab:before {
    content: '';
    position: absolute;
    top: -23px;
    right: -1px;
    border-right:1px solid orange;
    border-left:1px solid orange;
    border-top:1px solid orange;
    background:white;
    width: 247px;
    height:24px;
    border-top-right-radius:5px;
    border-top-left-radius:25px;
}

.tab:after {
    content: '';
    position: absolute;
    top: -9px;
    left:1px;
    border-right:1px solid orange;
    border-bottom:1px solid orange;
    border-top:none;
    background:white;
    width: 53px;
    height:9px;
    border-bottom-right-radius:180px;
    box-shadow:3px 3px 0px 3px white;
}

Answer 3

Vous podría Il est possible de le faire avec css, mais c'est très fastidieux (=problèmes potentiels avec les navigateurs). J'ai mis en place un comment le faire avec CSS . Cependant, on peut voir quelques perturbations à l'intérieur de la bordure (surtout quand on zoome). Ce n'est qu'une esquisse et elle pourrait bien sûr être optimisée.

La meilleure solution, fiable pour tous les navigateurs, serait d'utiliser une image de fond à l'endroit indiqué ci-dessous. Vous pouvez utiliser un pseudo-élément pour cela si vous le souhaitez.

En fait, je construis la pente avec deux pseudo-éléments tournés et obliques. Cette solution est supérieure à celles qui n'utilisent que le rayon de la bordure (ce qui, à mon avis, n'est pas optimal car les navigateurs rendent les coins arrondis de manière très différente), mais elle nécessite navigateurs compatibles en raison de la transform .

#head:before,#head:after {
    content:"";display:block;
    height:40px; 
    width:70px;
    border-left:2px solid orange;
    border-top:2px solid orange;
    transform:skewX(-45deg);
    border-top-left-radius:10px;
    position:relative;
    top:-2px;
    left:-40px;
}
#head:after {
    transform:rotate(180deg) skewX(-45deg);
    left:-180px;bottom:32px;top:auto;
    width:128px;
}

Answer 4

Peut-être ce code ? jsFiddle Je ne suis pas sûr que vous le souhaitiez, mais il fonctionne dans tous les navigateurs

HTML :

<div class="head">&nbsp;</div>
<div class="bdy"><div class="mask"></div>&nbsp;<br><br><br><br><br><br></div>

CSS :

.head{    
    border-top: 1px solid #ffccff;
    border-left: 1px solid #ffccff;
    border-right: 1px solid #ffccff;
    border-radius: 40px 7px 0 0 ;
    margin-left: 20%;
}
.bdy{
    border-radius: 3px 0 3px 3px;
    border-top: none;
    border-left: 1px solid #ffccff;
    border-right: 1px solid #ffccff;
    border-bottom: 1px solid #ffccff;
}
.mask{

    top:-1px;
    left:1px;
    width:20%;
    height: 1px;
    background-color:#ffccff;
}