Подскажите как сверстать вот такой треугольник (смотрите на фото), что-бы в нем был текст и что-бы все заголовки были выровнены правильно. Пыталась и через css и как фоновое изображение, но ничего не получается ...
Всем большое спасибо!)
2 ответа
Через фоновое изображение вполне нормально реализуется).
.text {
display: inline-block;
font-size: 30px;
font-family: Arial;
padding: 25px;
background-color: #fff;
}
.text span {
padding: 20px;
}
.text span.txt {
padding: 0px;
}
.text span.bg {
background-image: url(https://nordconnect.com/ru/wp-content/uploads/2016/06/customer-triangle.png);
background-position: 100% center;
-webkit-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
color: white;
}
.list {
padding: 0px;
margin: 0px;
background-color: #fff;
}
.list li {
list-style: none;
display: inline-block;
}
<ul class="list">
<li><p class="text"><span class="txt">Start</span><span class="bg">Ex</span></p></li>
<li><p class="text">Support</p></li>
<li><p class="text">About US</p></li>
</ul>
Сымый глупый способ :D
.triangle-title {
display: inline-block;
height: 50px;
line-height: 50px;
background: transparent url('https://cdn.icon-icons.com/icons2/934/PNG/512/play-black-triangle-interface-symbol-for-multimedia_icon-icons.com_72958.png') no-repeat right center / auto 100%;
color: red;
padding-right: 15px;
}
<div class="triangle-title">Какой-то текст ЫЫ</div>