Ich versuche, in jede Ecke eines Containers einen Punkt zu setzen. Ich denke, der Trick dabei ist eine Kombination aus .my-container: before und dem Festlegen der Rahmen- oder Hintergrundeigenschaft von :before . Der Effekt, den ich möchte, ist ähnlich wie SO # 17306087 , aber ich möchte keine Bilder verwenden.
Bearbeiten
Ich werde das ziemlich oft verwenden, also würde es bevorzugen, dass es automatisch mit einer CSS-Klasse passiert (keine zusätzlichen DOM-Elemente erforderlich).
Bearbeiten
Da svg textbasiert ist und direkt in css eingefügt werden kann, suche ich nach dieser Methode. Ich sehe hier, dass das funktioniert: Beispiel Geige
meine aktualisierte Geige (hat zur Zeit einen CSS-Fehler, den ich versuche zu lokalisieren) feste Geige mit 4 Punkten mit Hintergrund-Prop
Der Svg ist gültig und wirft keine Fehler wie DOM: Geige
Sie können es nur auf einem Div und mit Standard-CSS tun.
Der Trick besteht darin, die Pseudo-Elemente zu verwenden, um zwei Kreise mit radialen Gradienten anzuzeigen.
%Vor%Sie können die Kreise auch in den Elementen selbst zeichnen, aber dann können Sie sie nicht auf Elemente mit Hintergrund anwenden.
Der obige Code macht die Kreise pixelig. Es ist besser, 1 Pixel für den Übergang von Rot zu Transparent zu lassen
%Vor%Wenn Sie davon ausgehen, dass Sie mit etwas Verrücktem einverstanden sind, gibt es eine CSS-Lösung, die vollständig auf einer einzigen Klasse (auf einem einzelnen Element) basiert. Die einzige Einschränkung ist, dass dieses Element mindestens ein Kindelement haben muss (was wahrscheinlich sowieso der Fall sein sollte, oder?)
%Vor% Sie können :before und :after verwenden, um Ihre Punkte zu erstellen, obwohl die Herausforderung darin besteht, dass dies nur zwei Punkte pro Element erzeugt. Aus diesem Grund habe ich es so eingestellt, dass es nach dem ersten Element im Container sucht und dieselben Stile darauf anwendet. (Der Platzhalterselektor * sucht nach einem Element und :first-child stellt sicher, dass es nur auf ein untergeordnetes Element angewendet wird)
Siehe Geige: Ссылка
Jetzt wird das natürlich nicht in jeder Situation funktionieren, und Sie können immer mit dem Selektor für dieses zweite Element herumspielen, wenn Sie etwas haben, das besser funktioniert.
Abgesehen davon, wenn Sie es ein wenig praktischer (aber weniger cool) machen möchten, würde ich empfehlen, zwei Wrapper-Div-Elemente zu erstellen und jeder von ihnen eine einzigartige Klasse zu geben, die jeweils zwei Punkte mit einem einfachen erzeugt :before und :after .
HTML:
%Vor%CSS
%Vor%BEARBEITEN:
jQuery-Lösung zum einfachen Anhängen der Punkte an verschiedene divs mit der gleichen Klasse
%Vor%Damit werden die 4 Punkte an jedes Element mit der Klasse .myDivsThatNeedDotsClass
angehängtMit diesem Ansatz können Sie den HTML-Code von oben entfernen, aber behalten Sie das CSS wie es ist.
Wenn Sie nicht für alle die gleiche Klasse haben, können Sie dies tun
%Vor% Folgendes kann Ihr Aufschlag sein
<div class="my-container">
<div class="tr"></div>
<div class="tl"></div>
<div class="br"></div>
<div class="bl"></div>
<p class="stuff">Some stuff</p>
</div>
das CSS wie folgt
%Vor%Tags und Links css css3 css-shapes