Создание треугольника в css с градиентным фоном

Question

Создание треугольника в css с градиентным фоном

Я пытаюсь создать треугольник в css с градиентным фоном. У меня пока не было никакого успеха. Есть ли способ сделать это, чтобы вызвать этот эффект, видимый на изображении ниже.
(Треугольник, прикрепленный к неправильному окну ошибки пароля.)

Дизайн в Photoshop
Введите описание изображения здесь

Это дизайн, который у меня есть до сих пор в 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-трюкам.

794 3

css css3 css-shapes psd

3 ответов:

Comments

Ничего не найдено.

Ana · Accepted Answer · 2013-03-15 20:24:44

Создание треугольников (или других фигур- пятиугольников, шестиугольников , восьмиугольников, десятиугольников, додекагоны, тетрадекагоны, octadecagons и т. д.) с градиентом (или любым другим фоном изображения) действительно легко с помощью CSS-преобразований.
Но в этом случае вам даже не нужен треугольник. Вам просто нужно повернуть квадратный псевдоэлемент на 45 градусов и применить градиент от угла к углу. угол.
демо-версия
<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: '';
}

Xarcell · Accepted Answer · 2013-03-15 18:18:56

Вы можете создать CSS-треугольник, но не CSS-треугольник, который сам является градиентом. Единственный трюк, который я бы предложил, - это выбрать цвет, который больше всего напоминает цвет в градиентном фоне. Это просто зависит от того, насколько велик ваш градиент на самом деле, и насколько хорошо треугольник будет вписываться.

Для красного div можно попробовать использовать цвет #d94040, но тогда у него не будет границы и тени. Тем не менее, они могут быть добавлены. Чтобы добавить границу к треугольнику CSS, вы можете разместить внутри вашего это также треугольник CSS, который имеет тот же размер. Для этого потребуется использовать абсолютное позиционирование и z-индекс, чтобы перекрыть их.

Или вы можете использовать :: after или:: before для создания ваших CSS-треугольников без добавленного HTML-кода,но тогда это будет работать только в современных браузерах.

Milche Patern · Accepted Answer · 2013-03-15 18:38:45

В CSS3 вы можете создать треугольник с помощью "трюка с границей". Эта граница может быть цветной и иметь фон.

WebKit теперь (и Chrome 12 по крайней мере) поддерживает градиенты в качестве изображения границы.

Для более поддерживаемого решения я предлагаю вам "градиент" фон a :перед псевдо-элементом для witch вы бы применили трюк "фон-градиент" + (CSS треугольник с границей).

Вот генератор cssTriangle для вашего эксперимента.