Layer-Border nach innen

Hi Leute, ich bin gerade dabei des Design meiner Internetseite zu überarbeiten. Es fehlt nicht mehr viel aber ich habe folgendes Problem: http://i.imgur.com/aC6R6Pw.png

Ich arbeite viel mit Transparenz, jetzt habe ich die Menüleiste links und rechts vom runden Logo platziert und möchte, dass die Border ineinander gehen. Wie man oben im Bild sieht stört der Hintergrund aber im Logo, gibt es einen weg den Rand der Menüleiste so rund auszuschneiden?

http://i.imgur.com/GX1Sv78.png

border-radius vielleicht?!

border-radius ist ein Radius nach außen wie bei einem Kreis (siehe Kreis um das Logo), gewünscht ist aber ein Radius nach innen, so wie wenn du bei einem Blatt Papier einen Knick nach innen machst (und dann abrundest).

Ziel ist es, die zwei Ecken die in das Logo stehen so wegzuschneiden. Bei deiner Lösung würden sie nur rund…

Das blaue Logo mit Kreis und Linienansätzen in Photoshop. Verlängerung der Linien per CSS.

Danke Tronjer, das wäre wirklich eine Möglichkeit auf die ich noch nicht gekommen bin. Wenns eine Möglichkeit mit CSS gibt wäre mir das lieber wegen dem anderen Menüsystem im responsive Design, aber wenn sich nichts finden werde ich darauf zurückkommen :slight_smile:

Rein per CSS ginge es auch. Ein Container in der Mitte, der den Kreis (border-radius: 99) und die Linienansätze enthält. Für die 2 x 3 Linien(-Ansätze) jeweils ein Blockelement mit 2px height und border-top, welches per margin an den Kreis geschoben wird.

Ah, jetzt hab ich die kleinen Ecken gesehen. :smiley:

Doch das Logo hat „leider“ auch Transparenz, ist nur zufällig schwarz dahinter :slight_smile:

Ich arbeite jetzt mal ein wenig weiter und dann kann ich das Design direkt online stellen, dann könnt ihr das direkt anschauen

Ich habe dir mal ein Beispiel zusammen gebastelt. Vielleicht kannst du es ja gebrauchen oder nur als Anregung.
http://www.gipspferd.de/forumhilfe/inner-radius/

Danke djheke, ich habe das jetzt so gelöst wie du das im Beispiel gezeigt hast. Vielen Dank :slight_smile:

Wir helfen gerne;)