Comment créer des rectangles à côtés courbes (comme dans l'image) en utilisant CSS et HTML?

-9

J'ai besoin d'appliquer des codes CSS aux boutons, divs, paragraphes, etc. rendant les côtés courbes réactifs qui se rétrécissent et se dilate automatiquement en fonction du contenu et ne deviennent pas flous.Comment créer des rectangles à côtés courbes (comme dans l'image) en utilisant CSS et HTML?

Je préférerais un style à appliquer sur autant d'éléments que possible avec un minimum de changements (comme la couleur et le rembourrage). L'utilisation de la propriété backgroud-image ou du SVG n'est pas préférée.

éléments comme résultat

Source

2017-10-17 Abdullah Abolwafa

Il est prévu que vous au moins essayer de coder vous-même. Stack Overflow n'est pas un service d'écriture de code. Je suggère que vous fassiez un peu de [** recherche supplémentaire **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) , soit via Google ou en cherchant SO, faire une tentative et. Si vous avez encore des problèmes, revenez avec ** votre code ** et expliquez ce que vous avez essayé. –

-1

Si vous voulez juste coins arrondis.

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
    #rcorners1 { 
     border-radius: 25px; 
     background: #73AD21; 
     padding: 20px; 
     width: 200px; 
     height: 150px;  
    }  
    </style> 
    </head> 
    <body> 
    <p>The border-radius property allows you to add rounded corners to elements.</p> 
    <p>Rounded corners for an element with a specified background color:</p> 
    <p id="rcorners1">Rounded corners!</p>  
    </body> 
</html>

Source

2017-10-17 09:14:31

Merci pour la contribution, mais j'ai inclus une image de ce que je veux réaliser avec les éléments, et je pense que l'attribut 'border-radius' n'atteint pas l'objectif. –

Essayez quelque chose comme ceci.

Ceci est une implémentation proche de ce que vous essayez d'atteindre

https://jsfiddle.net/rahulSlash/qva79at5/

Le code HTML est comme suit

<html> 

    <body> 

    <div class="blue"> 
     <div class="white"> 
     </div> 
    </div> 

    </body> 

</html>

Et CSS va:

.blue { 
    height: 175px; 
    width: 300px; 
    background-color: #005999; 
    border-radius: 40%/20%; 
    position: relative; 
    margin-left: 100px; 
} 

.white { 
    position: absolute; 
    height: 75px; 
    width: 100px; 
    background-color: white; 
    left: -50px; 
    top: 50px; 
    border-radius: 40%/25%; 
    box-shadow: -5px 0px 10px -2px #aaaaaa; 
}

Source

2017-10-17 11:54:12

S'il vous plaît laissez-moi savoir si cela vous a été utile. –

Merci pour votre effort, mais cette solution ne fera que courber les côtés supérieur et inférieur et ne va pas s'adapter automatiquement à toutes les formes de tailles différentes. –

Voici un exemple pour les coins arrondis:

<html> 
<head> 
<style> 
p { 
    border-radius:15px; 
    border:5px dotted blue; 
} 
</style> 
<body bgcolor="tomato"> 
<h1> Hi! </h1> 
<hr> 
<p> Hey! This has a border! </p> 
</body> 
</html>

Source

2018-03-09 14:27:03 Goos

Comment créer des rectangles à côtés courbes (comme dans l'image) en utilisant CSS et HTML?

Répondre

Questions connexes