Как сделать ромбик?

[TopperHarley]

У меня в секции 3 элемента col-md-4. Как видно на картинке есть ромбик. Я взял прямоугольник и просто повернул его, но он выходит за пределы item`а. Так же быть не должно. Я бы мог сделать с помощью clip-path, но оно не кросбраузерно да и нужно у меть с помощью CSS делать такие штуки.

У меня проблемы с фигурами которые нужно делать средствами CSS. Как мне исправить эту ситуацию?

div class="col-md-4 col-sm-4">
          <div class="features_item">
            <div class="features_diamond"><span class="features_icon"></span></div>
            <h4 class="features_workout">Strength training</h4>
            <p class="features_text">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
            <p class="features_text">Maecenas mattis vitae tellus vel interdum. Quisque lacinia mauris id convallis pretium. Aliquam id odio sit amet mauris porttitor iaculis a eu dui.</p>
          </div>
        </div>

.features
  background-color: $white
  min-height: 870px
  padding: 50px 0 40px
  text-align: center
  &_training
    margin-top: 46px
  &_item
    margin: 35px 0 30px
  &_diamond
    width: 74px
    height: 74px
    background-color: $red
    margin: 0 auto 30px
    transform: rotate(45deg)
  &_icon
  &_workout
    font-size: 18px
    font-weight: 700
    text-transform: uppercase
    color: $dark-gray
    margin: 0
  &_text
    font-size: 13px
    font-weight: 400
    color: $gray-light
    margin: 29px 0 0

[AlexZaw]

ну и пускай он выходит за пределы, кому это мешает? если уж так критично остаться в размерах, можно увеличить паддинг сверху

[TopperHarley]

Сообщение от AlexZaw

ну и пускай он выходит за пределы, кому это мешает? если уж так критично остаться в размерах, можно увеличить паддинг сверху

Я пробовал. Результат идентичен. Вообще-то он не выходит за пределы блока. Просто мне казалось что при добавлении margin or padding ромб должен был сдвинуться и не входить в их зону

[Вадим Мошев]

Могу подсказать ещё два варианта выполнения ромбов. Оба кроссбраузерны.

1. Через треугольники в CSS. Как их делать, написано здесь: http://htmlbook.ru/blog/treugolniki-cherez-css
2. С помощью изображений. Подготовить изображение с необходимым ромбом на нужном (или прозрачном) фоне, после чего данное изображение установить как фон для необходимого блока.