it-swarm.com.de

Kann ich ein Div mit einem gekrümmten Boden erstellen?

Ich arbeite also an einer Website und habe mich gefragt, ob es möglich ist, rein mit HTML5, CSS3 (und ggf. JavaScript) ein div mit einem gekrümmten Boden zu erstellen, sodass es praktisch so aussieht:

 enter image description here

Oder ist dies nur mit einem Hintergrundbild möglich?

<body>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
        <ul class="nav">
            <li><a href="#">Home</a></li>
        </ul>
        </div>
    </div>
</body>
18
ShiftyF97

CSS:

div{
    background-color:black;
    width:500px;
    height:50px;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
}

sehen ist das ok für dich: DEMO

21
Aravind30790

Es gibt verschiedene Ansätze, um diese Form zu erstellen. Nachfolgend eine detaillierte Beschreibung der Möglichkeiten:

SVG-basierte Ansätze:

SVG ist die empfohlene Methode zum Erstellen solcher Formen. Es bietet Einfachheit und Skalierbarkeit. Nachfolgend sind einige Möglichkeiten aufgeführt:

1- Pfadelement verwenden:

Wir können das SVG-Element von path verwenden, um diese Form zu erstellen und sie mit einer Farbe, einem Farbverlauf oder einem Muster zu füllen.

Nur ein Attribut d wird verwendet, um Formen im path-Element zu definieren. Dieses Attribut selbst enthält eine Reihe kurzer Befehle und einige Parameter, die für die Funktion dieser Befehle erforderlich sind.

Nachstehend finden Sie den erforderlichen Code zum Erstellen dieser Form:

<path d="M 0,0
         L 0,40
         Q 250,80 500,40
         L 500,0
         Z" />

Nachfolgend finden Sie eine kurze Beschreibung der im obigen Code verwendeten path-Befehle:

  • Mit dem Befehl M wird der Startpunkt definiert. Es erscheint am Anfang und gibt den Punkt an, an dem die Zeichnung beginnen soll.
  • Der Befehl L wird verwendet, um gerade Linien zu zeichnen.
  • Der Befehl Q wird zum Zeichnen von Kurven verwendet.
  • Der Befehl Z wird verwendet, um den aktuellen Pfad zu schließen.

Ausgabebild:

 Div element with curved bottom

Arbeitsdemo:

svg {
  width: 100%;
}
<svg width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none">
  <path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" fill="black" />
</svg>


2-Ausschnitt:

Clipping bedeutet das Entfernen oder Verstecken einiger Teile eines Elements.

Bei diesem Ansatz definieren wir einen Beschneidungsbereich mithilfe des SVG-Elements clipPath und wenden diesen auf ein rechteckiges Element an. Alle Bereiche außerhalb des Beschneidungsbereichs werden ausgeblendet.

Unten ist der notwendige Code:

<defs>
    <clipPath id="shape">
        <path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" />
    </clipPath>
</defs>
<rect x="0" y="0" width="500" height="80" fill="#000" clip-path="url(#shape)" />

Nachfolgend finden Sie eine kurze Beschreibung der Elemente, die im obigen Code verwendet werden:

  • Das Element defs wird verwendet, um Elemente/Objekte für die spätere Verwendung im SVG-Dokument zu definieren.
  • clipPath Element wird verwendet, um einen Beschneidungsbereich zu definieren.
  • Das Element rect wird zum Erstellen von Rechtecken verwendet.
  • Das clip-path-Attribut wird verwendet, um den zuvor erstellten Beschneidungspfad zu verknüpfen.

Arbeitsdemo:

svg {
  width: 100%;
}
<svg width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none">
  <defs>
    <clipPath id="shape">
      <path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" />
    </clipPath>
  </defs>
  <rect x="0" y="0" width="500" height="80" fill="#000" clip-path="url(#shape)" />
</svg>


CSS-basierte Ansätze:

1- Pseudo-Element verwenden:

Wir können ::before oder ::after Pseudoelement verwenden, um diese Form zu erstellen. Schritte, um dies zu erstellen, sind unten angegeben:

  • Erstellen Sie eine Ebene mit ::before OR ::after Pseudoelement, dessen Breite und Höhe über dem übergeordneten Element liegt.
  • Fügen Sie border-radius hinzu, um die abgerundete Form zu erstellen.
  • Fügen Sie overflow: hidden zum übergeordneten Element hinzu, um den nicht benötigten Teil auszublenden.

Erforderliches HTML:

Alles, was wir brauchen, ist ein einzelnes div -Element mit einer Klasse wie shape:

<div class="shape"></div>

Arbeitsdemo:

.shape {
  position: relative;
  overflow: hidden;
  height: 80px;
}

.shape::before {
  border-radius: 100%;
  position: absolute;
  background: black;
  right: -200px;
  left: -200px;
  top: -200px;
  content: '';
  bottom: 0;
}
<div class="shape"></div>


2 - Radialgradient:

In diesem Ansatz verwenden wir die Funktion radial-gradient() von CSS3, um diese Form als Hintergrund auf das Element zu zeichnen. Dieser Ansatz erzeugt jedoch kein sehr scharfes Bild und kann einige spitze Ecken aufweisen.

Erforderliches HTML:

Es wird nur ein einzelnes div-Element mit einer Klasse benötigt, d. H.

<div class="shape"></div>

Notwendiges CSS:

.shape {
  background-image: radial-gradient(120% 120px at 50% -30px, #000 75%, transparent 75%);
}

Arbeitsdemo:

.shape {
  background: radial-gradient(120% 120px at 50% -30px, #000 75%, transparent 75%) no-repeat;
  height: 80px;
}
<div class="shape"></div>


JavaScript-basierte Ansätze:

Obwohl in diesem Fall nicht erforderlich, aber der Vollständigkeit halber, füge ich diesen Ansatz hinzu. Dies kann in einigen Fällen auch nützlich sein:

HTML5 Canvas:

Wir können diese Form mit Hilfe von Pfadfunktionen auf das HTML5-Canvas-Element zeichnen:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 40);
ctx.quadraticCurveTo(311, 80, 622, 40);
ctx.lineTo(622, 0);
ctx.fill();
<canvas id="canvas" width="622" height="80"></canvas>

Nachfolgend finden Sie eine kurze Beschreibung der im obigen Code verwendeten Methoden:

  • beginPath() wird verwendet, um einen neuen Pfad zu erstellen. Sobald ein neuer Pfad erstellt wurde, werden zukünftige Zeichenbefehle in den Pfad geleitet.
  • moveTo(x, y) bewegt den Stift zu den durch x und y angegebenen Koordinaten.
  • lineTo(x, y) zeichnet eine gerade Linie von der aktuellen Stiftposition zu dem durch x und y angegebenen Punkt.
  • quadraticCurveTo(cp1x, cp1y, x, y) zeichnet eine Kurve von der aktuellen Stiftposition zu dem durch x und y angegebenen Punkt, wobei der durch cp1x und cp1y angegebene Steuerpunkt verwendet wird.
  • fill() füllt den Strompfad mit einer Nicht-Null- oder ungeradzahligen Windungsregel.

Nützliche Ressourcen:

18
Mohammad Usman

Das ist, was du willst:

div{
    background-color: black;
    width: 500px;
    height: 200px;
    border-radius: 0 0 50% 50% / 15%;
}

jsFiddle Demo

5
manish_s

Ja, das ist in CSS möglich. Grundsätzlich sollten Sie das div breiter als die Seite machen, um die zu abgerundeten Kanten zu fixieren, dann zum Kompensieren links positioniert, wobei der untere Randradius sowohl die X- als auch die y-Werte und den negativen unteren Rand zum Ausgleich verwendet die Lücke:

border-bottom-left-radius: 50% 200px; // across half & up 200px at left Edge
border-bottom-right-radius: 50% 200px; // across half & up 200px at right Edge
width: 160%; overflow: hidden; // make larger, hide side bits
margin-bottom: -50px; // apply negative margin to compensate for bottom gap
position: relative; left:-30%; // re-position whole element so extra is on each side (you may need to add display:block;)
1
Vision Hive

Versuche dies

.navbar{
    border-radius:50% 50% 0 0;
    -webkit-border-radius:50% 50% 0 0;
    background:#000;
    min-height:100px;
}

jsFiddle-Datei

0
Roy Sonasish