2

Подскажите как сверстать вот такой треугольник (смотрите на фото), что-бы в нем был текст и что-бы все заголовки были выровнены правильно. Пыталась и через css и как фоновое изображение, но ничего не получается ... Всем большое спасибо!) введите сюда описание изображения

2 ответа 2

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>

2

Сымый глупый способ :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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.