Уроки по CSS/CSS3. Часть 9. Треугольники

В этом уроке учимся делать треугольники на CSS

[vahrammer]

Чтобы спозиционировать псевдо-элемент посередине, мне кажется удобнее вместо:

left: 65px;

задать ему:

left: 50%;
margin-left: -5px; (половина ширины треугольника)

Получается три удобства:
1) Не нужно так много считать :)
2) У нас может быть задана ширина родителя в процентах или вообще динамическая ширина. Тогда никак не высчитать точные координаты, чтобы псевдо-элемент отобразился ровно посередине.
3) Если нам надо изменить ширину родителя со ста пятидесяти пикселей до двухсот например, не придется менять стили у псевдо-элемента.

[dimaelmoTV]

наконец-то на моем сайте появится трифорс!

[STRIPPEDSTAR]

КОнспект
Делать треугольники вручную уже бессмысленно тк в сети куча
4:44 Делаем little-tip на css
Для выравнивания не зависящего от размеров родительского блока
лучше использовать такие параметры
top: 100%;
left: 50%;
transform: translateX(-50%); (спасибо
"Пропеллер от танка Гусеница от самолета"

[kobetsmatviy]

Еще вот прикольный эффект получаеться: (округленная стрелка)
width: 0;
height: 0;
border-bottom: 30px solid black;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-radius: 15px;

[Archik]

Пришлось мозги включать, чтобы понять почему так получается. Ответ пришел когда задумался о углах border, как делят пространство между собой две соседние стороны. Наиболее логичный вариант по умолчанию делить это пространство по прямой от угла элемента до угла границы элемента. получается, border-сторона это трапеция. А Для пустого элемента трапеция вырождается в треугольник.

[Taxa_ITS]

Умники ответьте как сделать стрелку вниз? Я хочу написать "ВЫБЕРИТЕ УСЛУГУ" и указать стрелкой вниз на услугу. Могу добавить картинку, но хочу написать стрелку с помощью html и scc.

[dagonline]

при попытке сделать тень треугольника (box-shadow) становится видно, что это на самом деле квадрат. как быть?

[КириллГорбачев-хя]

В уроке, свойство применяеться к классу, возможно в html у тебя класс, а в css ты применяешь свойство к id?

[zadable]

Как поставить картинку на заголовок сайта?

[vladsaprikin]

Спасибо за уроки! Подскажи, хотел сделать британский флаг, не выходит. Я только учусь, но никак не могу в контейнер поставить 4 треугольника и еще 4 прямых и 4 по диагонали! Был бы рад за помощь, спасибо!

[ВладимирЗаец-яс]

Не работает выдает просто пустую страницу, css файл подключен, проверял, кодировка правильная, почему так?

#container {
width:0px;
height:0px;
border-bottom:100px solid black;
border-left:50px solid tranparent;
border-right: 50px solid tranparent;
}

[Gittler]

У меня просто пустая страница ...
.container {
width:0px;
height:0px;
border-bottom:100px solid black;
border-left:50px solid ;
border-right: 50px solid tranparent;
}

[Locksly]

так будет работать
.cont {
width: 0;
height: 0;
border-top: 100px solid black;
border-right:50px solid transparent;
border-left:50px solid transparent;
}

[ucanbuyit]

Самый простой способ - добавить в корень сайта файл favicon.ico с иконкой 16х16

[СергейОрехов-ют]

у кого белый экран не смотря на то, что в css файле все до единого пробела также как у автора, то измените в файле html это "<link rel="stylesheet" type="text/css" href="">" на это "<link rel="stylesheet" href="">" . Для тупых - просто уберите "type="text/css''.

[rassom]

Походу я лох полнейший потому что у меня не получаеться, я пересматривал код много раз каждую букву все правильно но у меня в браузере не работает может кто подзкажет
.up{
background-color: #000;
width: 0;
height: 0;
border-bottom: 100px solid black;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

[romavorona]

Отличный урок, но не отображается треугольничек. Брррр.... и содержимое контента показывает.. а самого треугольника нет

[Владимир-ввш]

как нарисовать трапецию?: Что бы шва не было при масштабировании

[дмитрийгригоренко-йя]

я арбуз могу нарисовать...






на листе бумаги