Próbuję użyć niestandardowego koloru szesnastkowego dla mojego trójkąta CSS (obramowania). Jednak ponieważ używa właściwości granicznych, nie jestem pewien, jak to zrobić. Chciałbym omijać javascript i css3 tylko ze względu na kompatybilność. Staram się, aby trójkąt miał białe tło z obramowaniem 1px (wokół ściętych boków trójkąta) w kolorze # CAD5E0. czy to możliwe? Oto, co mam do tej pory:
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 100%;
width: 0;
height: 0;
border-color: transparent transparent transparent #CAD5E0;
border-style: solid;
border-width: 10px;
}
Moje skrzypce: http://jsfiddle.net/4ZeCz/
css
border
css-shapes
Ed R
źródło
źródło
border-color
atrybut, w zależności od kolorowej ramki trójkąt będzie wskazywał inny kierunek. Aby obrócić strzałkę w lewo, zmieńborder-color
natransparent #e3f5ff transparent transparent;
w obu.container:after
i.container:before
Wiem, że to akceptujesz, ale sprawdź ten również z mniejszym CSS:
http://jsfiddle.net/4ZeCz/3/
źródło
-webkit-
prefiksu (i-ms-
dla IE9). Wszystkie inne przeglądarki obsługują go bez prefiksu.Myślę, że jest to prostsze z użyciem clip-path :
źródło
Innym sposobem na osiągnięcie tego, szczególnie dla kogoś, kto potrzebuje tego do pracy z trójkątami równobocznymi lub nawet skalenicznymi, tak jak ja, jest użycie
filter: drop-shadow(...)
wielu wartości i bez promienia rozmycia. Ma to dodatkową zaletę polegającą na tym, że nie potrzeba wielu elementów ani dostępu do obu : przed i: po (próbowałem to osiągnąć za pomocą: po treści, która była w tekście, więc chciałem również uniknąć pozycjonowania bezwzględnego).W powyższym przypadku CSS: after może wyglądać następująco ( skrzypce ):
Myślę jednak, że są pewne ograniczenia lub dziwactwa:
<offset-y>
wartości w drugim cieniu () powyżej wygląda bardziej jak 1px niż 1px, chociaż wyobrażam sobie, że jest to związane z trygonometrią (chociaż przynajmniej na moim monitorze nie widzę różnicy między rzeczywiste wartości oparte na trygonometrii lub .5px lub nawet .1px w tym przypadku).<spread-radius>
) drop-shadow () może być tym, czego naprawdę szukam zamiast wielu wartości filtrów, ale dodając go po prostu całkowicie zepsuty.) Tutaj możesz zobaczyć, co zaczyna się dziać po przekroczeniu 1 piksela ( skrzypce ):Zwróć uwagę na zabawne, że pierwszy (zielony) jest nakładany raz, ale drugi (czerwony) jest nakładany zarówno na żółty trójkąt utworzony przez obramowanie, jak i zielony cień () i ostatni (niebieski) zostanie zastosowany do wszystkich powyższych. (Być może jest to również związane z wyglądem .5px).
Ale myślę, że możesz skorzystać z tych cieni budujących się nawzajem, jeśli potrzebujesz czegoś szerszego niż 1px, zmieniając je na coś takiego jak następujące ( skrzypce ):
gdzie pierwszy z nich ma ustawiony promień rozmycia (w tym przypadku 2,5 piksela, chociaż wynik jest pomnożony), a cała reszta ma rozmycie na 0. Ale to zadziała tylko dla tego samego koloru ze wszystkich stron i skutkuje w niektórych zaokrąglonych rogach, a także dość szorstkich krawędziach, im większy masz.
źródło
źródło