그라데이션 배경으로 CSS에서 삼각형을 만들려고합니다. 나는 아직 어떤 성공도 이루지 못했다. 아래 이미지에서 볼 수있는 효과를 없애기 위해이 방법이 있습니까? (잘못된 암호 오류 상자에 부착 된 삼각형.)그라데이션 배경으로 CSS에서 삼각형 만들기

이 포토샵에서

디자인은 지금까지 HTML과 CSS에있는 디자인입니다. 여기

내가 순간에 삼각형이있는 CSS입니다.

.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); 
}

것은 내가 스스로 그라데이션 인 CSS 삼각형을이 tutorial on CSS tricks.

출처

2013-03-15 Joel Dean

CSS에만 화살표 : http://cssarrowplease.com/ – Luca

만들기 삼각형 (또는 다른 모양 - pentagons, hexagons, 팔각형, decagons, dodecagons, tetradecagons, octadecagons 등) 그라데이션 (또는 이미지 배경의 다른 종류)와 함께 CSS의 변환 정말 쉽습니다.

하지만이 경우 삼각형이 필요하지 않습니다. 사각 의사 요소를 45도 회전시켜 구석에서 구석으로 그라디언트를 적용하면됩니다.

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: ''; 
}

출처

2013-03-15 17:52:02 Ana

멋지게 보입니다. 코드에 텍스트 그림자를 추가 할 수 있습니까? 고맙습니다 – MonsterMMORPG

당신은 CSS 삼각형을 만들 수 있습니다 사용하지만,되지 않았습니다. 제가 제안 할 유일한 트릭은 그라디언트 배경 내에서 색상과 가장 유사한 색상을 선택하는 것입니다. 그라디언트의 실제 크기와 삼각형의 블렌드 정도에 따라 달라집니다.

빨간색 div의 경우 # d94040 색상을 사용해 볼 수 있지만 테두리와 그림자가 부족합니다. 그러나 이것들은 추가 될 수 있습니다. CSS 삼각형에 테두리를 추가하려면 같은 크기의 CSS 삼각형 인 내부를 배치 할 수 있습니다. 절대 위치 지정과 Z- 색인을 사용하여 이들을 겹쳐 써야합니다.

또는 after :: before를 사용하여 추가 된 HTML 코드없이 CSS 트라이앵글을 만들 수 있지만 최신 브라우저에서만 사용할 수 있습니다.

출처

2013-03-15 16:18:56 Xarcell

좋아.그렇다면 삼각형의 이미지를 대신 사용하는 것이 가장 좋을 것이라고 생각합니까? –

그것이 나라면 그라데이션을 전혀 사용하지 않을 것입니다. 그러면 단추처럼 보이지 않게되고 경고처럼 느껴집니다. – Xarcell

실제로 변형을 사용하여 그라데이션 배경이있는 삼각형을 매우 쉽게 만들 수 있습니다. http://codepen.io/thebabydino/pen/cBmxv – Ana

CSS3에서는 '경계 트릭'으로 삼각형을 만들 수 있습니다. 이 테두리는 채색이 가능하며 배경을 가질 수 있습니다.

이제 WebKit (및 Chrome 12 이상)은 경계 이미지로 그라디언트를 지원합니다.

더 많은 지원되는 해결책으로 저는 마녀를위한 a : pseudo 요소의 배경을 '그라디언트'할 것을 제안합니다. '배경 그라디언트'+ (경계선이있는 css 삼각형) 트릭을 적용 할 것입니다.

Here is a cssTriangle generator 실험 할 수 있습니다.

출처

2013-03-15 16:38:45

그라데이션 배경으로 CSS에서 삼각형 만들기

답변

demo

관련 문제