Трикутник на чистому CSS
Для того, щоб зробити трикутник на чистому 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
посилання
Якщо вам подобаються мої статті, проекти, теми або плагіни - ви завжди можете допомогти сайту у розвитку. Дякуємо!