zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Box mit geschwungener Linie

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.11.2016, 13:02
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard Box mit geschwungener Linie

Hallo Gemeinde,
ich stelle mir gerade die Frage ob es möglich ist diese Box mit CSS3 zu gestalten:



Code wäre bislang

HTML-Code:
<div class="shortcut_box">
<h2>Der Verbund</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</p>
<a class="button" target="#">mehr erfahren</a>
</div>
Jetzt habe ich überlegt ob es nicht möglich wäre mit

HTML-Code:
.shortcut_box:before
Ein weißes Oval mit border-radius draufzulegen. Ich bekomme das aber nicht so schön hin wie in Beispiel-Bild. Also, geht nicht? Oder nur anders, aber nicht so wie auf dem Bild?

Gruß
ChOp
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.11.2016, 13:30
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.01.2010
Beiträge: 960
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Mit border-radius und :before / :after landest du wohl in einer Sackgasse.

Du kannst dich mit linear- und radial-gradient beschäftigen und damit den Hintergrund der Box gestalten.

Siehe zum Beispiel

https://www.mediaevent.de/css/radial-gradient.html

Oder mit SVG und die Grafik als Hintergrundbild einfügen.

Gruss

MrMurphy

Geändert von MrMurphy (24.11.2016 um 13:58 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.11.2016, 11:27
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Hallo

Mit border-radius und :before / :after landest du wohl in einer Sackgasse.

Du kannst dich mit linear- und radial-gradient beschäftigen und damit den Hintergrund der Box gestalten.

Siehe zum Beispiel

https://www.mediaevent.de/css/radial-gradient.html

Oder mit SVG und die Grafik als Hintergrundbild einfügen.

Gruss

MrMurphy
Danke für Deine Antwort. Habe mal etwas mit dem Gradient rumgespielt aber war hoffnungslos :/ Ich gehe dann wohl eher die SVG Variante. Danke!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!? damonster CSS 12 27.08.2008 15:56
Zentrierte Box soll von Streifen durchquert werden saltletts CSS 8 05.06.2007 16:43
ps design (slices), php (dynamischer inhalt), css gestaltung schleepy CSS 19 02.06.2006 22:46
Kniffliges Layout mit float Roadrunnerle CSS 6 14.03.2006 11:26
#boxes a:hover.info: 2.posting mit css !!! marioN CSS 5 25.01.2004 17:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:28 Uhr.