Ich werde ein Bild mit dem Effekt anhängen Ich versuche, mit HTML und CSS achive.HTML, CSS benutzerdefinierten Overlay
Statt der schwarzen Farbe, ich werde ein Bild hat, und ich möchte eine weiße Überlagerung macht den Eindruck eines runden Boden zu geben. Dies könnte mit einem Hintergrundbild geschehen, aber ich möchte dies mit CSS machen und diese Option als letzten Ausweg beibehalten.
Einstellung 50% auf border-bottom-left-radius und border-bottom-right-radius sollten Sie die erwarteten Ergebnisse.
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
div {
background-color: black;
width: 400px;
height: 50px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}<div></div>Etwas wie folgt aus:
div {
background-color: orange;
width:500px;
height:200px;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
overflow: hidden;
}<div>
<img src="http://lorempixel.com/output/city-q-c-640-480-5.jpg">
</div>Zuerst einmal vielen Dank für Ihre Antwort, aber es ist nicht genau das, was ich versuche zu erreichen. Wie Sie sehen können, ist Ihr Beispiel an den Rändern viel runder als es sein müsste, siehe @Hemants Antwort. Es ist der Meinung, dass man dem, was ich versuche, am nächsten kommt. –
@JohnDoe sehen Ich wollte dir nur eine Idee geben, wie du lösen kannst, was du versuchst. Jetzt geht es nur noch darum, mit diesen '50%' Werten herumzuspielen. Ich werde nicht versuchen, die genaue Form zu bekommen, nach der Sie suchen, auch weil es von der Breite/Höhe abhängt. Warum akzeptierst du Hemants nicht, wenn du das am meisten magst? Der, den du angenommen hast, löst deine Frage nicht! Es ist nicht besser als meins, denn es ist das gleiche + fehlt das Bild und 'Überlauf: versteckt;' Teil, der für Ihre Frage wichtig ist! nicht das bluddy '50%' shape stuff ... was auch immer – caramba
Diese Form kann durch Verwendung von 2 HTML-Elemente erreicht werden.
Wir setzen die rechteckige Grundelement overflow: hidden.
Das untergeordnete Element sollte wie ein Oval geformt sein (kann über border-radius getan werden) und skaliert + so übersetzt werden, dass es nur die untere Kante innerhalb des Hauptelementbereichs hat.
Bitte versuchen Sie diese jsFiddle.
Zunächst einmal danke für deine Antwort, das sieht sehr vielversprechend aus und die nächste Antwort auf das, was ich versuche zu erreichen. Ich werde es ausprobieren ! –
Mögliches Duplikat von [Kann ich ein div mit einem Curved bottom erstellen?] (Https://stackoverflow.com/questions/17040709/can-i-create-a-div-with-a-curved-bottom) –