Wie man ein Feld mit Pfeil in CSS?
Wie man ein Feld mit Pfeil in CSS?
Herstellung der Runden Ecke ist einfach. aber jede Idee, um den Pfeil auf der linken Seite, ohne mit Bild.
Ist es möglich, möglich, mit
nur ein Elemente <p>....</p>
CSS:
body {
background: #ff004e;
padding: 40px
}
p {
background: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: 250px;
height: 150px
}
HTML:
<p></p>
- Schau mal hier: stackoverflow.com/questions/5623072/... - JSFiddle: jsfiddle.net/DoubleYo/whbJb/5
- Toll. jsfiddle.net/rABy9/1 Eine weitere Sache, wie man flache Rand für Pfeil.
- wirklich schön.
- Ich muss feststellen, dass CSS nicht ein paint-Programm und sollte nicht als solche verwendet werden. Wenn Sie brauchen ein Bild, ein Bild verwenden.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wie diese :
Demo : http://jsfiddle.net/sparkup/edjdxjf2/
UPDATE :
Es kann auch erreicht werden, ohne leere Elemente mit der css-Eigenschaft
:before
Demo : http://jsfiddle.net/sparkup/y89f1te0/
hoffe es hilft
<div id="pointer"></div>
ist es möglich zu tun, wothbefore:
?Chris Coyier hat eine ausgezeichnete Zusammenfassung der möglichen Formen gebaut in CSS mit einem einzigen element (vor/nach):
http://css-tricks.com/examples/ShapesOfCSS/
Standard-Tool-Tipp
Wenn Sie möchten, einen einfachen Pfeil, dann können Sie ein pseudo-element mit
border-right
.CSS:
HTML:
FIDDLE 1
Flachen Rand Tool-Tipp
Wenn Sie möchten, eine flachen Rand für Pfeil, versuchen Sie dies :
CSS:
HTML:
FIDDLE 2
Meine Antwort (mit keine flachen Rand),
Hinzugefügt einige Berechnungsformel:
Sind die grundlegenden Regeln:
Beispiel: (-4px) - (-7px) = 3px
Beispiel: (
before
'sz-index
) < (after
'sz-index
) oder 9998 < 9999.Das Ergebnis:
Verwenden Sie dieses online-tool und Sie können es tun, ohne die Eingabe viel code
http://www.cssarrowplease.com
den obigen code kann verwendet werden für rechts-Pfeil.
Können Sie Gebrauch machen von span -, wenn u nicht wollen, um mit einer div.
http://jsfiddle.net/SSKwn/