Треугольник на основе псевдо

Курсы §25. Оформление текста с помощью CSS. Часть 2
1

Основное задание выполнено но интересует как сделать логотип -красный треугольник. Пробовала с псевдоэлементами но не получается добавить третью линию.

Код:
html,
body {
min-width: 570px;
height: 300px;
margin: 0;
font-family: “Arial”, sans-serif;
color: #ffffff;
background: url(“football.jpg”) 50% 50% no-repeat;
}

h1 {
position: relative;
width: 320px;
margin: 0;
padding-left: 40px;
font-size: 80px;
line-height: 100px;
font-weight: normal;
text-transform: uppercase;
text-shadow: -5px 5px 0px rgba(0,0,0,.5);
letter-spacing: 40px;
word-wrap: break-word;
text-indent: 100px;

}

h1::before,
h1::after{
content: “|”;
position: absolute;
top: -5px;
left: -55px;
font-size: 55px;
font-weight: bold;
text-shadow:none;
color:rgba(255, 0, 0, 0.3);
}

h1::before {transform: rotate(30deg) translate(0px, -15px);}

h1::after {transform: rotate(150deg) translate(-80px, -40px);}

2

какой треугольник? разве в задании было что-то красное?

3

Да, есть красный треугольник на мяче вроде бы.

4

какой-то скрытый бонус?

5

Кажется, было что-то такое. Открою задание - посмотрю.

6

В комментариях к заданию посмотрите, сообщение от 02.02.2015 г.

7

вы про вот это:

Да! Ещё можно нарисовать треугольник из трёх красных непересекающихся линий прозрачного цвета. А, впрочем, на ваше усмотрение.

?

8

Да, а еще в комментариях есть ссылка на смешное видео, связанное с этим.

9

да, это довольна старая шутка юмора,
а вот человек реально попытался это сделать:

1 лайк
10

не уверенна что меня поняли попытаюсь обьяснить что имела ввиду- относительно к этому заданию или нет- вопрос состоял в том возможно ли используя СSS и псевдоэлементы создать геометрическую фигуру что бы треугольник был :
1)без внутреннего фона а не по принципу скрывания бордер как было расмотренно ранее (сплошной треугольник с заливкой)
2) построение по принципу “незакрытого треугольника” как в этом лого

11

чтобы построить элемент для стороны (трапецию) - можно использовать, например, рамку для прямоугольника с нулевой высотой и шириной отличной от нуля (для одной стороны - цветную, для двух смежных - прозрачные, для четвертой стороны - отсутствует - в общем, повторяем курс рамки и треугольники)

дальше, берем три элемента - по каждому для стороны - и трансформируете поворотом и перемещением. а можно и один элемент + два псевдоэлемента.

но к этому заданию не подходит - здесь нужны красные линии. и прозрачные.

12

в первом приближении это выглядит вот так:

треугольник.png1210×736 216 KB

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

1 лайк
13

Спасибо Tala,
то что нужно. Разумно и просто а я пыталась это как то сделать избегая border :))))
по ходу без рамок никуда