Box mit einer abgeschrägten Ecke mit CSS?

designer83 · 02.07.2012

Hallo zusammen,

kann man <div> mit CSS so gestalten, dass ich an einer Ecke (oben rechts) statt runde eine abgeschrägte Ecke erstelle?

Oder muss ich in diesem Fall mit Bildern arbeiten?

dlogic · 02.07.2012

AW: Box mit einer abgeschrägten Ecke mit CSS?

Mit Bildern musst du nicht arbeiten...

Code:

<!doctype html>
<body>
    <div style="margin-top: -75px; border-width: 75px; border-style: solid; border-color: white; border-bottom-color: black;"></div>
        <div style="background-color: black; height: 1000px;">
            <div style="position: relative; width: 850px; margin-left: auto; margin-right: auto;">
                <div style="border-width: 75px; border-style: solid; border-color: black; border-bottom-color: white;"></div>
                <div style="background-color: white; height: 500px;"></div>
            </div>
        </div>
    <div style="margin-bottom: -75px; border-width: 75px; border-style: solid; border-color: white; border-top-color: black;"></div>
</body>
</html>

Myhar · 02.07.2012

AW: Box mit einer abgeschrägten Ecke mit CSS?

Wow. Dabei lässt sich diese sehr leicht finden. Und nachdem dort sogar zwei Lösungen angegeben wurden, wieso hast du dich gerade für diese Lösung entschieden?
Ich würde hier ja eine Grafik empfehlen. Mittels border-image lässt sich das sehr angenehm realisieren.
Man kann mit CSS3 zwar Dreiecke realisieren, wie man eine abgeflachte Kante erstellt ist mir nicht bekannt. Oder ob das überhaupt funktioniert?