{"id":1248,"date":"2014-12-23T10:50:26","date_gmt":"2014-12-23T10:50:26","guid":{"rendered":"http:\/\/www.bay20.com\/?p=1248"},"modified":"2025-05-12T12:31:38","modified_gmt":"2025-05-12T06:46:38","slug":"css-pfeile-erstellen","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/css-pfeile-erstellen\/","title":{"rendered":"CSS-Pfeile erstellen"},"content":{"rendered":"

Es gibt zwei M\u00f6glichkeiten, Pfeile in Ihrer Website zu haben, erstens k\u00f6nnen Sie Bild als Pfeil oder css verwenden, um den einen zu erstellen.<\/p>\n

Ich pers\u00f6nlich empfehle Ihnen die Verwendung von CSS, da es im Vergleich zu Bildern weniger Zeit zum Laden ben\u00f6tigt.<\/p>\n

Bitte \u00fcberpr\u00fcfen Sie den HTML- und CSS-Code unten, um den Pfeil mit Hilfe von CSS zu erstellen.<\/p>\n

Die tats\u00e4chliche Breite und H\u00f6he des Pfeils wird durch die Breite des Rahmens bestimmt.<\/p>\n

<div class=“arrow“><\/div><\/p>\n

.arrow{
\nmargin:auto;
\nwidth: 0;
\nheight: 0;
\nborder-left: 90px solid transparent;
\nborder-right:90px solid transparent;
\nborder-top: 90px solid #000;
\n}<\/p>\n

Klicken Sie auf den Link, um die Live-Demo<\/a> zu sehen.<\/p>\n","protected":false},"excerpt":{"rendered":"

There are two ways to have arrows in your site, first you can use image as arrow or css to create the one.
\nI personally recommend you to use css because it take less time to load in compare to image.<\/p>\n","protected":false},"author":1,"featured_media":1490,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"class_list":["post-1248","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/1248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=1248"}],"version-history":[{"count":5,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/1248\/revisions"}],"predecessor-version":[{"id":16892,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/1248\/revisions\/16892"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/1490"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=1248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=1248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=1248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}