<
  • Главная
Статьи

Трикутник на чистому CSS

  1. Поради
  2. посилання

Для того, щоб зробити трикутник на чистому CSS досить використовувати всього один блок

і пару рядків стилів.

<Div class = "arrow-box"> </ div> .arrow-box {width: 100px; height: 50px; position: relative; } .Arrow-box: before {position: absolute; left: 100%; top: 50%; margin-top: -12px; content: ''; width: 0px; height: 0px; border-style: solid; border-width: 12px 0 12px 8px; border-color: transparent transparent transparent # 007bff; }

результат:

Поради

IE6 нічого не знає про прозорість для border, тому для нього можна застосувати следующии трюк : Задати рамкам рожевий колір і через фільтр chroma зробити їх прозорими.

.arrow-box: before {position: absolute; left: 100%; top: 50%; margin-top: -12px; content: ''; width: 0px; height: 0px; border-style: solid; border-width: 12px 0 12px 8px; border-color: transparent transparent transparent # 007bff; _border-color: pink pink pink # 007bff; / * IE6 * / _filter: chroma (color = pink); line-height: 0px; }

Браузер Firefox отрісовиваєт трикутник із сірою рамкою. Виправляється завданням inset для прозорих сторін рамки.

.arrow-box: before {position: absolute; left: 100%; top: 50%; margin-top: -12px; content: ''; width: 0px; height: 0px; border-style: inset solid inset solid; / * FF * / border-width: 12px 0 12px 8px; border-color: transparent transparent transparent # 007bff; _border-color: pink pink pink # 007bff; / * IE6 * / _filter: chroma (color = pink); line-height: 0px; }

Браузери на основі движка webkit Рендер трикутник з кривим anti-aliasing. Для них можна застосувати такий підхід: повернути фігуру на 360 градусів.

.arrow-box: before {position: absolute; left: 100%; top: 50%; margin-top: -12px; content: ''; width: 0px; height: 0px; border-style: inset solid inset solid; / * FF * / border-width: 12px 0 12px 8px; border-color: transparent transparent transparent # 007bff; _border-color: pink pink pink # 007bff; / * IE6 * / _filter: chroma (color = pink); line-height: 0px; -webkit-transform: rotate (360deg) / * webkit * /}

Щоб трикутник був поверх блоку, але не заважав подій миші hover, click, задіємо CCS4 властивість pointer-events.

.arrow-box: before {position: absolute; left: 100%; top: 50%; margin-top: -12px; content: ''; width: 0px; height: 0px; border-style: inset solid inset solid; / * FF * / border-width: 12px 0 12px 8px; border-color: transparent transparent transparent # 007bff; _border-color: pink pink pink # 007bff; / * IE6 * / _filter: chroma (color = pink); line-height: 0px; -webkit-transform: rotate (360deg) / * webkit * / pointer-events: none; }

See the Pen by mihdan () on .0

посилання

Якщо вам подобаються мої статті, проекти, теми або плагіни - ви завжди можете допомогти сайту у розвитку. Дякуємо!



Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью