Niestandardowy kolor obramowania trójkąta CSS

114

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/

Ed R
źródło

Odpowiedzi:

185

Właściwie musisz to udawać dwoma trójkątami ...

.container {
    margin: 15px 30px;
    width: 200px;
    background: #fff;
    border: 1px solid #a00;
    position: relative;
    min-height: 200px;
    padding: 20px;
    text-align: center;
    color: #fff;
    font: bold 1.5em/180px Helvetica, sans-serif;
    text-shadow: 0 0 1px #000;
}

.container:after,
.container:before {
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-style: solid;
}

.container:after {
    top: 10px;
    border-color: transparent transparent transparent #fdd;
    border-width: 10px;
}

.container:before {
    top: 9px;
    border-color: transparent transparent transparent #a00;
    border-width: 11px;
}

Zaktualizowany Fiddle tutaj

wprowadź opis obrazu tutaj

Scott
źródło
1
To idealne! dokładnie to, czego potrzebowałem. Dziękuję Ci.
Ed R
1
hej, nie rozumiem, jak zmodyfikowałbym trójkąt, aby pojawił się po drugiej stronie pudełka (nie rozumiem, jak działa trójkąt css)
Kevin.
1
SMRT - Jesteś taki mądry!
Zaklinacz kodów
5
Uwaga, dla tych z tym samym pytaniem co @ Kevin. Spójrz na border-coloratrybut, w zależności od kolorowej ramki trójkąt będzie wskazywał inny kierunek. Aby obrócić strzałkę w lewo, zmień border-colorna transparent #e3f5ff transparent transparent;w obu .container:afteri.container:before
rmagnum2002
1
@Scott Dzięki za to! Twój JS Fiddle był na miejscu! Jednak uważaj na copypasta z JSFiddle, dodał on dwa niewidoczne i nieprawidłowe znaki do mojego pliku CSS, które spowodowały błędy walidacji / analizy w tym pliku css. Po usunięciu niewidocznych znaków (znaki miały zerową szerokość, więc kursor ich nie pokazywał, ale mogłem cofnąć się), działało cudownie. To nie twój kod był problemem, myślę, że JS Fiddle wprowadził jakieś tajemnicze znaki do wyświetlanego kodu? Nie wiem, ale chciałem o tym wspomnieć ze względu na potomność, na wypadek, gdyby ktoś napotkał ten sam problem.
hypervisor666,
91

Wiem, że to akceptujesz, ale sprawdź ten również z mniejszym CSS:

.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;
    right:-7px;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    border-right:1px solid #CAD5E0;
    border-bottom:1px solid #CAD5E0;
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}

http://jsfiddle.net/4ZeCz/3/

Sandeep
źródło
hej, nie rozumiem, jak zmodyfikowałbym trójkąt, aby pojawił się po drugiej stronie pudełka (nie rozumiem, jak działa trójkąt css)
Kevin.
2
@Kevin Tworzę to, sprawdź jsfiddle.net/4ZeCz/97 . Spróbuj pobawić się właściwościami, z których korzystam, a jeśli masz jakieś pytanie, możesz mi zadać :)
sandeep
3
Wyjaśnienie: tworzy to normalny kwadratowy element z obramowaniem po dwóch sąsiadujących bokach, tworząc nachylony trójkąt. Następnie kwadrat jest nachylony pod kątem 45 stopni, więc trójkąt jest skierowany w górę (lub gdziekolwiek chcesz). Nawiasem mówiąc, teraz potrzebujesz tylko -webkit-prefiksu (i -ms-dla IE9). Wszystkie inne przeglądarki obsługują go bez prefiksu.
rvighne
Bardzo sprytne rozwiązanie! Dziękuję Ci.
Solhan
3

Myślę, że jest to prostsze z użyciem clip-path :

.container {
  width: 150px;
  min-height: 150px;
  background: #ccc;
  padding: 8px;
  padding-right: 6%;
  display: inline-block;
  clip-path: polygon(0% 0%,0% 100%,90% 100%,90% 5%,100% 10%,90% 15%,90% 0%);
}
<div class="container">
test content
</div>

lalengua
źródło
1

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 ):

.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-style: solid;
  border-width: 20px 0 40px 15px; /* skewed to show support for non-right-angle triangles */
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(1px 0 0 #CAD5E0) drop-shadow(0 .5px 0 #CAD5E0);
}
<div class="container">
  Test Container
</div>

Myślę jednak, że są pewne ograniczenia lub dziwactwa:

  • Brak obsługi w IE11 (choć wydaje się dobrze w FF, Chrome i Edge)
  • Nie jestem do końca pewien, dlaczego .5px dla <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).
  • Obramowania większe niż 1 piksel (cóż, ich wygląd w ten sposób) wydają się nie działać dobrze. A przynajmniej nie znalazłem rozwiązania, chociaż poniżej znajduje się mniej niż optymalny sposób na zwiększenie rozmiaru. (Myślę, że udokumentowany, ale nieobsługiwany czwarty parametr ( <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 ):

.container {
  background-color: #eee;
  padding: 1em;
}
.container:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20.4px 10px 0 10px;
  border-color: yellow transparent transparent transparent;
  margin-left: .25em;
  display: inline-block;
  filter: drop-shadow(-6px -4px 0 green) drop-shadow(6px -4px 0 red) drop-shadow(0 6px 0 blue);
}
<div class="container">
  Test Container
</div>

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 ):

filter: drop-shadow(0 0 2.5px red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red);

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.

Max Starkenburg
źródło
0
.triangle{
    position: absolute;
    width:0px;
    height:0px;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-bottom: 72px solid #DB5248;
}

.triangle:after{
    position: relative;
    content:"!";
    top:8px;
    left:-8px;
    color:#DB5248;
    font-size:40px;
}

.triangle:before{
    content:".";
    color: #DB5248;
    position: relative;
    top:-14px;
    left:-43px;
    border-left: 41px solid transparent;
    border-right: 41px solid transparent;
    border-bottom: 67px solid white;
}
Sharan
źródło