Courbe boîte en utilisant css

J'ai essayé de concevoir comme ci-dessous l'image, ne suis toujours pas obtenir le résultat, s'il vous plaît aidez-moi. Toute aide serait appréciéeCourbe boîte en utilisant css

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#rcorners1 { 
 
    border-radius: 10px 90px 90px 10px/8% 100% 100% 8%; 
 
    background: #18b1a0; 
 
    padding: 20px; 
 
    width: 200px; 
 
    height: 150px;  
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<p id="rcorners1">Rounded corners!</p> 
 
</body> 
 
</html>

Source

2017-10-17 Ganesh Putta

Voici un code pour commencer 'border-radius: 10px 90px 90px 10px/8% 100% 100% 8%; '(https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) – Krusader

@Krusader Merci, jeh ave mise à jour avec votre code, mais j'ai besoin de couleur sombre à gauche comme le montre l'image. –

Utilisez un pseudo-élément pour cela (': before' ou': after') et prenez-le à partir de là – UncaughtTypeError

Utilisation du commentaire par @Krusader, vous pouvez ajouter position: relative; à # rcorners1. Ensuite, ajoutez un élément pseudo (:: après) avec le CSS suivant:

#rcorners1::after { 
content: ""; 
position: absolute; 
top: 10%; 
left: -15px; 
width: 30px; 
height: 80%; 
background-color: green; 
border-radius: 100%; 
}

Ainsi, le CSS complet ressemblera à ceci:

#rcorners1 { 
position: relative; 
background: #18b1a0; 
padding: 20px; 
width: 200px; 
height: 150px; 
border-radius: 10px 90px 90px 10px/8% 100% 100% 8%; 
overflow: hidden; 
} 
#rcorners1::after { 
content: ""; 
position: absolute; 
top: 10%; 
left: -15px; 
width: 30px; 
height: 80%; 
background-color: green; 
border-radius: 100%; 
}

Hope this helps.

Source

2017-10-17 08:04:41

Est-ce que cela aide ::

#rcorners1 { 
    border-radius: 10px ; 
    background: #18b1a0; 
    padding: 20px; 
    width: 200px; 
    height: 150px; 
    position: relative; 
} 

#rcorners1:after { 
    content: ''; 
    background: #18b1a0; 
    padding: 20px; 
    width: 10px; 
    height: 150px; 
    position: absolute; 
    right: -20px; 
    z-index: -1; 
    top: 0; 
    border-radius: 0px 36px 36px 0; 
}

Source

2017-10-17 08:08:55 aashi

Voici plusieurs sortes de formes. Vous pouvez en saisir l'idée. https://css-tricks.com/examples/ShapesOfCSS/

et j'ai mettre à jour votre code

#rcorners1:after { 
 

 
    bottom: 10px; 
 
content: ""; 
 
position: absolute; 
 
top: 10px; 
 
left: 0; 
 
width: 50px; 
 
left: -35px; 
 
background-color: #098a7c; 
 
border-radius: 70px 100% 100% 70px; 
 
} 
 

 
#rcorners1 { 
 
position: relative; 
 
background: #18b1a0; 
 
padding: 20px; 
 
width: 200px; 
 
overflow: hidden; 
 
height: 150px; 
 
border-radius: 10px 130px 130px 10px/10px 100% 100% 10px; 
 
}

<p id="rcorners1">Rounded corners!</p>

Source

2017-10-17 09:02:33 Kumar

Une autre solution pour les pseudo-éléments seraient en utilisant le radial-gradient (tel que recommandé par Krusader in the comments). Vous pouvez combiner deux radial-gradient comme image de fond: une pour l'ombre la plus sombre à gauche et une autre pour la courbe sur la bordure droite. Vous devrez peut-être jouer un peu avec la fin de la transparence afin qu'elle ne soit pas trop nette ni trop floue.

Quelque chose comme ceci:

@import url('https://fonts.googleapis.com/css?family=Inconsolata'); 
 

 
.box { 
 
    width: 190px; 
 
    height: 109px; 
 
    box-sizing: border-box; 
 
    font-family: Inconsolata; 
 
    font-size: 18px; 
 
    background-image: radial-gradient(circle at -52%, rgba(0,0,0,0.25) 36%, transparent 37%), 
 
        radial-gradient(circle at 29%, #18b1a0 88%, transparent 89%); 
 
    border-radius: 6px 25px 25px 6px; 
 
    color: white; 
 
    text-align:center; 
 
    padding-top:36px; 
 
}

<div class="box">SECRET<br/>CHAMBER</div>

Source

2017-10-18 01:45:23

\t #content { 
 
    \t \t border: 1px solid blue; 
 
    \t \t width : 400px; 
 
    \t \t height : 200px; 
 
    \t \t position: relative; 
 
    \t \t overflow: hidden; 
 
    \t } 
 

 
    \t #rconer-big, 
 
    \t #rconer-small { 
 
    \t \t display: inline-block; 
 
    \t \t width : 200px; 
 
    \t \t height : 100px; 
 
    \t \t border-top-right-radius: 50px; 
 
    \t \t border-bottom-right-radius: 50px; 
 
    \t \t margin : 0; 
 
    \t } 
 

 
    \t #rconer-big { 
 
    \t \t background-color: skyblue; 
 
    \t } 
 

 

 
    \t #rconer-small { 
 
    \t \t background-color: blue; 
 
    \t \t position: absolute; 
 
    \t \t top : 0; 
 
    \t \t left : -190px; 
 
    \t }

<div id="content"> 
 
\t \t <p id="rconer-big"></p> 
 
\t \t <p id="rconer-small"></p> 
 
</div>

Source

2017-10-18 14:39:13 WAEX

Courbe boîte en utilisant css

Répondre

Questions connexes