Итоговое испытание.

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

Сделал в общем этот треугольник из 3х линий у кого есть комментарии кто как его делал?
`html,
body {
min-width: 570px;
height: 300px;
margin: 0;
font-family: ‘Arial’, sans-serif;
color: #FFF;
background: url(football.jpg) 50% 50% no-repeat;
}

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

h1::before {
content: ‘|’;
position: absolute;
top: -5px;
left: -55px;
text-shadow:none;
font-size:55px;
font-weight:bold;
text-shadow:
20px 0 0 #fff,
40px 0 0 #fff;
}
h1::after {
content:’’;
position:absolute;
bottom:20px;
right:-15px;
width:80px;
height:80px;

background:
    linear-gradient(-230deg,
    transparent 50%,
    rgba(255, 0, 0,0.5) 50%,
    rgba(255, 0, 0,0.5) 55%,
    transparent 55%,
    transparent 65%,
    rgba(255, 0, 0,0.5) 65%,
    rgba(255, 0, 0,0.5) 70%,
    transparent 70%,
    transparent 80%,
    rgba(255, 0, 0,0.5) 80%,
    rgba(255, 0, 0,0.5) 85%,
    transparent 85%);
}`
2

Я выполнил треугольник так: убрал тени у логотипа (осталась одна палка), затем ::after добавил блок с рамкой справа и сверху, повернул блок с рамкой на 45 градусов.

[code]h1::before {
content: “|”;
position: absolute;
top: -5px;
left: 45px;
font-size:55px;
font-weight: bold;
text-shadow: none;

/* text-shadow:
20px 0px,
40px 0px; */
}
h1::after {
content: “”;
position: absolute;
top: 32px;
left: 38px;
width: 31px;
height: 31px;
border-top: 5px solid white;
border-right: 5px solid white;
transform: rotate(45deg);
}[/code]

1 лайк