2017-09-21 4 views
-5

Comment créer cette forme en utilisant CSS et HTML seulement?Je veux obtenir cette forme CSS et y avoir un fond d'écran

Shape with rounded side

+5

Bienvenue sur Stack Overflow. Qu'avez-vous déjà essayé de faire cela? Veuillez consulter [Combien d'effort de recherche est attendu?] (Https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users). Stack Overflow n'est pas un service de codage. Vous êtes censé *** étudier votre problème et faire une bonne tentative pour écrire le code vous-même *** avant de poster. Si vous êtes bloqué sur quelque chose de * spécifique *, revenez en arrière et incluez un [exemple minimal, complet et vérifiable] (https://stackoverflow.com/help/mcve) et un résumé de ce que vous avez essayé, afin que nous puissions vous aider. – FluffyKitten

+0

[Un message similaire] (https://stackoverflow.com/questions/46200094/how-to-apply-a-specific-shape-to-a-div) –

Répondre

2

Vous pouvez obtenir des formes similaires à cela en utilisant la propriété border-radius. Vous pouvez jouer avec les valeurs jusqu'à ce que vous obteniez la forme parfaite que vous voulez.

HTML:

<div class="shape"> 
    <img src="https://cdn.stocksnap.io/img-thumbs/960w/2RTQTEA00I.jpg"> 
</div> 

CSS:

.shape{ 
    width:500px; 
    height:400px; 
    margin:50px auto; 
    overflow:hidden; 
    border-radius:0 0 10% 50%; 
} 
.shape img{ 
    max-height:100%; 
} 

est ici un violon: https://jsfiddle.net/p80b7fp6/