CSS3 Borders (Arrows) - Möglichkeit von "zwei" Pfeilen in einem div?

ich habe ein PSD-Layout zu entwickeln und da sind einige Dinge wie "cards" und ich war neugierig, ob ich das ohne Bilder und nur mit CSS3-Borders machen könnte.CSS3 Borders (Arrows) - Möglichkeit von "zwei" Pfeilen in einem div?

http://i.imgur.com/NSZYPsh.png (wie diese Boxen aussehen sollen)

der „Einsatz“ sollte -Pfeil transparent sein (weil es ein Vollbild-Hintergrund-Bild hinter den „Karten“ ist).

Ich habe versucht, mit cssarrowplease.com herumzuspielen, aber konnte es nicht zur Arbeit bringen, also wollte ich fragen, ob es überhaupt möglich ist?

und wenn ja: wie? Ich habe mehrere Dinge auf cssarrowplease.com (in der Entwicklerkonsole) ausprobiert, konnte aber nicht mehr als einen Pfeil zur Box hinzufügen und die Transparenz funktioniert auch nicht.

jede Hilfe ist willkommen!

Quelle

2016-08-09 Dustin

Es wird erwartet, dass Sie zumindest versuchen, diese für sich selbst zu codieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie einige [** zusätzliche Forschung **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-sected-of-stack-overflow-users) tun entweder über Google oder durch die Suche nach SO, versuchen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben und warum es nicht funktioniert hat. –

Ich frage nicht einmal nach Code in erster Linie. Ich frage, ob es möglich ist. Ich weiß, wie man einfache Pfeile/Sprechblasen mit Pseudoelementen nach/vor macht. aber ich möchte wissen, ob du tatsächlich ZWEI Pfeile und einen Einsatz mit Transparenz hinzufügen kannst und IF YES WIE. – Dustin

Ja, aber Sie sollten FIRST immer noch versuchen. Ansonsten bitten Sie uns, es für Sie zu programmieren. –

body{ 
 
    background-color:gray; 
 
    padding:20px; 
 
}

<!-- The best solution to this is to build polygons with SVG, like this --> 
 

 
<svg height="300" width="400"> 
 
    <polygon points="0 100,200 100,200 0,0 0,50 50" 
 
    style="fill:white;stroke:#0c6868;stroke-width:6" /> 
 
</svg>

Quelle

2016-08-09 16:22:21 jlizanab

tolle Arbeit, danke. Jetzt müsste ich etwas über SVG-Zeichnen lernen. – Dustin

Ja, sollte es möglich sein. Um den Transparenzeffekt für den Einfügungspfeil zu erhalten, müssen Sie ein Bild erstellen, bei dem es sich um das Rechteck vom oberen Rand der Karte bis zum unteren Rand der Karte und vom Punkt des Einfügungspfeils bis zum rechten Rand der Karte handelt Karte (wenn der Einfügungspfeil auf der linken Seite der Karte ist). Sie würden dies dann auf die linke Seite des mittleren Kartenbereichs ausrichten. Dieses Bild müsste ein Png sein, um die Transparenzinformationen zu enthalten.

Beachten Sie jedoch, dass es nicht möglich ist, mit css Text zu erhalten, der den Nebensatz natürlich umschließt.

Quelle

2016-08-09 15:17:37 user1917407

also ohne background/border-images wird es nicht möglich sein die transparenz zu verwenden. Recht? zu traurig. das Umschließen des Einschubs ist kein Problem, würde nur die Breite der Einfügungspfeile auffüllen. – Dustin

Nein, Sie müssen kein Hintergrundbild verwenden. Sie können einfach "position: absolute" auf einem "" -Tag verwenden und an Ort und Stelle bewegen. Der mittlere Bereich mit Text kann mit einem regulären Hintergrund und einem oberen/unteren Rand ausgeführt werden. – user1917407

nun, was ich meinte war: es ist ohne bilder nicht möglich. ich wollte eine saubere css3-lösung ohne bilder (egal ob absolute img-elemente oder hintergrundbilder) – Dustin

CSS3 Borders (Arrows) - Möglichkeit von "zwei" Pfeilen in einem div?

Antwort

Verwandte Themen