Форум программистов
 
Расширенный поиск
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 28.06.2017, 19:29   #1
TopperHarley
 
Регистрация: 21.06.2016
Сообщений: 6
Репутация: 10
По умолчанию Как сделать ромбик?

У меня в секции 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

Изображения
Тип файла: jpg d73bcb8f8a3f41a8be883b0bef7c9663.jpg (61.2 Кб, 0 просмотров)
TopperHarley вне форума   Ответить с цитированием
Старый 28.06.2017, 20:21   #2
AlexZaw
Пользователь
 
Аватар для AlexZaw
 
Регистрация: 26.06.2017
Адрес: Томск
Сообщений: 18
Репутация: 32
По умолчанию

ну и пускай он выходит за пределы, кому это мешает? если уж так критично остаться в размерах, можно увеличить паддинг сверху
AlexZaw вне форума   Ответить с цитированием
Старый 28.06.2017, 23:30   #3
TopperHarley
 
Регистрация: 21.06.2016
Сообщений: 6
Репутация: 10
По умолчанию

Цитата:
Сообщение от AlexZaw Посмотреть сообщение
ну и пускай он выходит за пределы, кому это мешает? если уж так критично остаться в размерах, можно увеличить паддинг сверху
Я пробовал. Результат идентичен. Вообще-то он не выходит за пределы блока. Просто мне казалось что при добавлении margin or padding ромб должен был сдвинуться и не входить в их зону
Изображения
Тип файла: jpg Безымянный.jpg (105.7 Кб, 3 просмотров)

Последний раз редактировалось TopperHarley; 28.06.2017 в 23:32.
TopperHarley вне форума   Ответить с цитированием
Старый 29.06.2017, 23:18   #4
Вадим Мошев
гигаМодератор :)
Заслуженный модератор
 
Аватар для Вадим Мошев
 
Регистрация: 12.11.2010
Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес:
Сообщений: 7,362
Репутация: 3637
По умолчанию

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

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



Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать чтоб писало что это первая функция и что это вторая как сделать? при компляции Uourin Общие вопросы C/C++ 3 19.05.2016 09:09
Я сделал прогу, но мне сказали сделать 2 подпрограммы. Я чет не понял как сделать. Помогите, пожалуйста! kostyan199731 Паскаль 4 25.06.2015 18:00
сделать видеочат на сайте. Хочу сделать но не знаю как.. Shaman-King Свободное общение 12 14.01.2013 00:22
Я создал игру типо марио и хочу сделать её по сети как это сделать? rbkmz Работа с сетью в Delphi 7 14.05.2012 15:58
Как сделать отступы в ворде?(сделать шпаргалку) clack Microsoft Office Word 2 23.01.2012 08:09




20:10.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

купить трафик


как улучшить посещаемость, а также решения по монетизации сайтов, видео и приложений

RusProfile.ru


Справочник российских юридических лиц и организаций.
лучший хостинг
Выбираем лучший хостинг: рейтинг ТОП 10
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru