Abgerundete Seite, nicht abgerundete Ecken

Ich würde gerne eine Form erstellen, wie unten angezeigt, ganz in CSS. Wie können Sie sagen, würde es dauern, ein bisschen mehr Feintuning als einfach mit abgerundeten Ecken...

Abgerundete Seite, nicht abgerundete Ecken

Kann es getan werden?

css-tricks.com/examples/ShapesOfCSS
Es ist immer noch nichts mehr als die Anwendung border-radius.

InformationsquelleAutor user2008567 | 2013-01-24

  1. 19

    Hier ist das jsfiddle: http://jsfiddle.net/swqZL/

    CSS für das element div mit der Klasse "Bild":

    .figure {
height: 400px;
width: 200px;
background-color: black;
border-bottom-left-radius: 100%30px;
border-bottom-right-radius: 100%30px;    
}

    Horizontalen radius 100%, vertikale radius 30px

    Es ärgert mich, dass diese nicht symmetrisch ist.

    InformationsquelleAutor Margin Right

  2. 5
    <div style="background: black; 
        width: 300px; 
        height: 450px; 
        padding-top: 50px;">
    <div style="width: 200px; 
            height: 400px; 
            background: white; 
            margin: 0 auto;
            border-radius: 0 0 100px 100px / 0 0 25px 25px;
            -moz-border-radius: 0 0 100px 100px / 0 0 25px 25px;
            -webkit-border-radius: 0 0 100px 100px / 0 0 25px 25px;
            ">
    </div>
</div>

    Info auf der selektiven oval border-Radien hier gefunden: http://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/

    1. Unprefixed Eigentum sollte der Letzte sein, plus dieser Tage das Präfix diejenigen, die nicht mehr benötigt werden. 2. Warum inline-styles? 3. Warum zwei Elemente? Würde man es machen. Demo dabblet.com/gist/4626553
    1. Gut zu wissen! 2. So kann es kopiert werden und fiel irgendwo ohne zusätzliche mods. 3. Ich nahm an, der OP wollte das gesamte Bild (box mit einer anderen box drin).
    1. Denken Sie daran caniuse.com - verdammt nützlich! 2. Noch, das könnte mehr Probleme verursachen als es löst. 3. Gültiger Punkt.

    InformationsquelleAutor Phire

Schreibe einen Kommentar