Pfeil mit Rundung erstellen?

BlackFire

Kann man mit CSS irgendetwas in der Richtung zeichnen oder geht das nicht so?
[Blockierte Grafik: http://i.imgur.com/xhGb5F9.png]

Wobei dieses Haus eigentlich eher auch nur so ein kleiner Pfeil mit Strichen an beiden Seiten sein sollte aber das ist ja nur zur Veranschaulichung. Das habe ich ebend kurz mit Paint gezeichnet aber das war auch gar nicht mal so leicht.
Wie könnte man sowas bewerkstelligen oder geht das nicht mit CSS? Wie könnte man das dann machen?

MrMurphy

Hallo,

das geht nicht mit CSS.

Du kannst eine Grafik erstellen und an der gewünschten Stelle einfügen. Am sinnvollsten erscheint mir eine SVG-Grafik, deren Größe als Vektorgrafik flexibel angepasst werden kann und die auf vielfältige Weise in eine HTML-Datei eingebunden werden kann.

Gruss

MrMurphy

Basi

Geht wohl. codepen.io example
Nur als kleine Anregung, einfach nach Belieben anpassen

HTML

<div class="arrowBox">        
    <div class="arrow"></div>
    <div class="tail"></div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}




div.arrowBox {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 20px;
    border: 1px dashed #333;
}




div.arrowBox div.arrow {
    position: absolute;
    left: 125px;
    top: 50px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #333 0%, #333 50%, #fff 50%, #fff 100%);
    transform: rotate(45deg);   
}




div.arrowBox div.tail {
    position: absolute;
    width: 128px;
    height: 100px;
    top: 75px;
    left: 20px;
    border-right: 4px solid #333;
    border-bottom: 4px solid #333;
    border-radius: 0 0 75px 0;
}

Alles anzeigen

BlackFire

Hmm ... danke für den Code. Ehrlich gesagt hätte ich jetzt auch eher gedacht, das man das so mit CSS nicht realisieren könnte aber naja, was soll man da noch sagen, ne? Ws man alles mittlerweile mit CSS schon zaubern kann ist schon so erstaunlich. Wie sieht es denn mit der Browserkompabilität von dem Code aus?

wolf

Guck doch einfach selbst? http://caniuse.com/

Such nach linear-gradient und transform

Jetzt mitmachen!