Tworzenie trójkąta w css z gradientowym tłem

Question

Próbuję utworzyć trójkąt w css z gradientowym tłem. Nie osiągnąłem jeszcze żadnego sukcesu. Czy jest sposób, aby to zrobić, aby efekt ten był widoczny na obrazku poniżej. (Trójkąt, który jest dołączony do pudełka błędu hasło źle.)

Design w Photoshopie

Jest to projekt mam dotąd w HTML i CSS.

Oto css Mam do trójkąta w tej chwili.

.error-triangle { 
    wwidth: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-right: 10px solid blue; 
    margin-top: 64px; 
    margin-left: 350px; 
    position: fixed; 
    -webkit-box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25); 
     -moz-box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25); 
      box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25); 
    background-image: -webkit-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767); 
    background-image: -moz-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767); 
    background-image:  -o-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767); 
    background-image:  -ms-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767); 
    background-image:   linear-gradient(to top, #eb6767, #d94040 35%, #eb6767); 
} 

używałem tego tutorial on CSS tricks.

Answer 1

Tworzenie trójkąty (lub inne kształty - pentagons, hexagons, ośmiokątny, decagons, dodecagons, tetradecagons, octadecagons i tak dalej) z gradientem (lub jakiegokolwiek innego rodzaju obrazu tła) jest bardzo proste z transformacji CSS.

Ale w tym przypadku nie potrzebujesz nawet trójkąta. Trzeba tylko obrócić kwadratowy pseudoelement o 45 stopni i zastosować gradient na tym od rogu do rogu.

demo

<div class='warn'></div> 

CSS:

.warn { 
    position: relative; 
    margin: 0 auto; 
    border: solid 1px darkred; 
    width: 12em; height: 3em; 
    border-radius: .2em; 
    background: linear-gradient(lightcoral, firebrick); 
} 
.warn:before { 
    position: absolute; 
    top: 50%; left: 0; 
    margin: -.35em -.45em; 
    border-left: inherit; border-bottom: inherit; 
    /* pick width & height such that 
    the diagonal of the square is 1em = 1/3 the height of the warn bubble */ 
    width: .7em; height: .7em; 
    border-radius: 0 0 0 .2em; 
    transform: rotate(45deg); 
    background: linear-gradient(-45deg, firebrick -100%, lightcoral 200%); 
    content: ''; 
} 

Answer 2

Można tworzyć trójkąt CSS, ale nie trójkąt CSS, który sam jest gradient. Jedyna sztuczka, którą sugerowałbym, to wybór koloru, który najbardziej przypomina kolor na tle gradientu. To zależy tylko od tego, jak duży jest twój gradient i jak dobrze trójkąt się połączy.

Dla czerwonego div możesz spróbować użyć koloru # d94040, ale wtedy nie będzie on miał obramowania ani cienia. Jednak można je dodać. Aby dodać obramowanie do trójkąta CSS, możesz umieścić wewnątrz swój trójkąt CSS o takim samym rozmiarze. T To by wymagało użycia bezwzględnego pozycjonowania i z-indeksu do ich nałożenia.

Lub możesz użyć :: after lub :: before, aby utworzyć trójkąty CSS bez dodanego kodu HTML, ale wtedy działałoby to tylko w nowoczesnych przeglądarkach.

Answer 3

W CSS3 można utworzyć trójkąt z "sztuczną krawędzią". Ta granica może być kolorowa i może mieć tło.

WebKit teraz (i przynajmniej Chrome 12) obsługuje gradienty jako obraz obramowania.

Aby uzyskać bardziej obsługiwane rozwiązanie, sugeruję "gradient" tła: przed pseudoelementem dla czarownicy zastosowałbyś "gradient tła" + sztuczkę (trójkąt css z ramką).

Here is a cssTriangle generator do eksperymentowania.