1

Страница состоит из section элементов, которые идут друг за другом. В конце некоторых section повторяется элемент (ромб), как лучше всего отобразить его. Хотел с помощью css-свойств after сделать (вроде: section:: after в нем либо transform rotate или этот ромб в виде png на bg), но данный способ не сработал.

Как считаете как лучше сделать этот повторяющий элемент??

Буду благодарен за пример.

Изображение части веб-страницы ниже.

Пример последнего кода, на width-height не реагирует, content: ""; - превращает элемент в размеры 0-0. Код:

.about-us {
    padding-top: 80px;
    padding-bottom: 54px;
    background-image: url(../src/img/bg_about-us.png);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    &::after {
        content: "77";
        background-image: url(../src/img/section_bottom-btn.png);
        // position: absolute;
        width: 75px;
        height: 75px;
        // right: 0;
        // bottom: 0;
        transform: rotate(45deg);
        z-index: 0;
    }

введите сюда описание изображения

3
  • но данный способ не сработал - так покажи как делал и объясни почему ты думаешь, что не сработал
    – Grundy
    19 мая 2017 в 10:01
  • Да и код не забудьте приложить - не с нуля же верстать.
    – MihailPw
    19 мая 2017 в 10:03
  • @Grundy, код приложил
    – job.js.org
    19 мая 2017 в 10:08

2 ответа 2

2

Код @nueq + псевдоэлемент-стрелка.

.your__class {
  width: 100%;
  height: 300px;
  background: #ccc;
  position: relative;
  margin-bottom: 100px;
}

.your__class::before {
  content: '';
  display: block;
  position: absolute;
  bottom: -50px;
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background: red;
  transform: rotate(45deg);
}

.your__class::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -10px;
  left: calc(50% - 8px);
  width: 16px;
  height: 16px;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  transform: rotate(-45deg);
}
<section class="your__class"></section>
<section class="your__class"></section>
<section class="your__class"></section>

1
  • Спасибо хорошее дополнение.
    – job.js.org
    19 мая 2017 в 18:04
1

Почему в вашем коде закомментированы строки с абсолютным позиционированием псевдоэлемента?

.your__class {
  width: 100%;
  height: 300px;
  background: #ccc;
  position: relative;
  margin-bottom: 100px;
}

.your__class::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -50px;
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background: red;
  transform: rotate(45deg);
}
<section class="your__class"></section>
<section class="your__class"></section>
<section class="your__class"></section>

3
  • Спасибо за правильный ответ. ответ на ваш вопрос, я начал тестить другой способ, поэтому в комменте сохранил. Скажите, использование after в таких случаях является наиболее верным?
    – job.js.org
    19 мая 2017 в 11:12
  • И как разместить в блоке стрелку? с помощью добавления символа в content?
    – job.js.org
    19 мая 2017 в 11:15
  • 1
    @Эмиль, на мой взгляд after тут хорошее решение, так как повторяемость элементов есть, и всем им нужен ромб. Стрелку можно картинкой. На сколько я знаю применить transform к content - нельзя (это мои знания, а не утверждение), но если хочется символ, можно добавить псевдоэлемент before, со стрелкой и спозиционировать его над ромбом
    – nueq
    19 мая 2017 в 12:02

Ваш ответ

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

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