1 Тема від karmeljuk Востаннє редагувалося karmeljuk (06.08.2015 11:17:55)

  • karmeljuk
  • karmeljuk
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 28.01.2014
  • Повідомлень: 1 496
    • Репутація: 816

Тема: Хлібні крихти з трикутниками

Привіт всім

Маю цікаву задачку: потрібно намалювати в css хлібні крихти з трикутниками
http://s9.postimg.org/gz7ii3kq7/Web_API.jpg

Задачу не складна, зробив її тут http://codepen.io/karmeljuk/pen/EjrEGM

Проблема в тому, що трикутна тінь зроблена через filter: drop-shadow, а дана властивість не працює в жодному ІЕ.
Питання: як переписати код, щоб запрацювало на ІЕ ?

karmeljuk вебсайт

2 Відповідь від BarsicPlus

  • BarsicPlus
  • BarsicPlus
  • Користувач
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 17.03.2015
  • Повідомлень: 147
    • Репутація: 86

Re: Хлібні крихти з трикутниками

IE? Справді ? :)
Хіба що не використовувати тінь взагалі. Трикутники зробити з діва а контур бордером задати.

BarsicPlus вебсайт

3 Відповідь від karmeljuk

  • karmeljuk
  • karmeljuk
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 28.01.2014
  • Повідомлень: 1 496
    • Репутація: 816

Re: Хлібні крихти з трикутниками

Цікавить для ІЕ10-ІЕ11. Контур бордером не вийде задати, бо сам трикутник вже намальований бордером

.list li span:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 113px solid transparent;
  border-bottom: 113px solid transparent;
  border-left: 62px solid #de4a4a;
  position: absolute;  
  margin-top: -113px;
  top: 50%;
  left: 100%;
  z-index: 2;
  filter: drop-shadow(2px 1px 1px #913030);
  -webkit-filter: drop-shadow(2px 1px 1px #913030);
  margin-left: 2px;
}

karmeljuk вебсайт

4 Відповідь від TwiStar

  • TwiStar
  • Користувач
  • Поза форумом
  • Дата реєстрації: 28.08.2014
  • Повідомлень: 62
    • Репутація: 29

Re: Хлібні крихти з трикутниками

Намалюй їх у svg та спи спокійно.

Подякували: BarsicPlus1

5 Відповідь від karmeljuk

  • karmeljuk
  • karmeljuk
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 28.01.2014
  • Повідомлень: 1 496
    • Репутація: 816

Re: Хлібні крихти з трикутниками

TwiStar написав:

Намалюй їх у svg та спи спокійно.


Дякую, але це не варіант. Надалі буде текст додаватися і вміст змінюватися через адмінку WP

karmeljuk вебсайт

6 Відповідь від BarsicPlus

  • BarsicPlus
  • BarsicPlus
  • Користувач
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 17.03.2015
  • Повідомлень: 147
    • Репутація: 86

Re: Хлібні крихти з трикутниками

karmeljuk написав:
TwiStar написав:

Намалюй їх у svg та спи спокійно.


Дякую, але це не варіант. Надалі буде текст додаватися і вміст змінюватися через адмінку WP

Я ось що можу сказати з цього приводу: в такому випадку .... робіть два псевдоелементи, тобто два трикутники. Один з них нехай буде більшим (контур), а другим меншим. Той, що менший, хай перекриває більшого. От так. Інакше не получиться.

BarsicPlus вебсайт

7 Відповідь від TwiStar

  • TwiStar
  • Користувач
  • Поза форумом
  • Дата реєстрації: 28.08.2014
  • Повідомлень: 62
    • Репутація: 29

Re: Хлібні крихти з трикутниками

karmeljuk написав:
TwiStar написав:

Намалюй їх у svg та спи спокійно.


Дякую, але це не варіант. Надалі буде текст додаватися і вміст змінюватися через адмінку WP


Я мав на увазі - трикутники. Тобто робите псевдоелемент :after не через border та тінь, а просто ставите svg-елемент. І контент ні до чого тут тоді.

8 Відповідь від karmeljuk Востаннє редагувалося karmeljuk (11.08.2015 13:53:15)

  • karmeljuk
  • karmeljuk
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 28.01.2014
  • Повідомлень: 1 496
    • Репутація: 816

Re: Хлібні крихти з трикутниками

Дякую. Зробив через ромб з поворотом в 45 градусів. На такий елемент можна накладати тінь котра буде працювати в ІЕ10

.list .triangle-block::before{
  background: #de4a4a;
  content: "";
  height: 140px;
  margin-top: -70px;
  position: absolute;
  right: -75px;
  top: 50%;
  width: 140px;
  z-index: 1;
  transform: rotate(45deg) skew(17deg, 17deg);
  box-shadow: 2px -1px 10px 0 rgba(0,0,0,0.6);
}

Код http://codepen.io/karmeljuk/pen/yNZjqW

Подякували: BarsicPlus1

karmeljuk вебсайт