CSS? Как эта стрелка сделана?

Это сводит меня с ума. Я использовал инспектор Firefox, чтобы попытаться выяснить, как эта стрелка была сделана (внизу) на Headway site.CSS? Как эта стрелка сделана?

enter image description here

Я вырезал прочь код, удаляя куски с помощью инспектора, и получил его вниз к этому:

enter image description here

Независимо от того, где я осмотреть, я могу не найти любую такую форму. Никакого фонового изображения, никаких глифов, ничего. На данный момент это даже не имеет значения, но я вытягиваю свои волосы, пытаясь понять, как они это сделали!

Любые гуру CSS, чтобы посмотреть и перезвонить? Ради обучения. :)

источник

2015-02-01 CaptSaltyJack

Это просто повернутый квадрат в виде ::before pseudo element.

Как вы можете видеть, элемент представляет собой квадрат (тот же height/width). Элемент абсолютно расположен с left: 50% и отрицательным margin-left от -31px (половина ширины) для горизонтального центрирования. Наконец, для поворота квадрата используется transform: rotate(-45deg).

Вот моделирование используется:

.home-testimonial-wrapper:before 
.home-cta-area::before, { 
    display: block; 
    width: 62px; 
    height: 62px; 
    background: #253031; 
    position: absolute; 
    top: -15px; 
    left: 50%; 
    margin: 0 0 0 -31px; 
    z-index: 5; 
    content: ""; 
    -webkit-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
}

Помимо этого, если вы заинтересованы в том, как сделать треугольник с помощью CSS, см this answer.

источник

2015-02-01 00:52:57

Что-то должно быть не так с инспектором Firefox. Независимо от того, на что я нажимаю, я никогда не вижу, чтобы CSS всплывал с правой стороны. – CaptSaltyJack

Подобные вещи (45-градусные разрезы) обычно выполняются с использованием прозрачных границ. – Shomz

@CaptSaltyJack Для чего это стоит, [это то, что я получаю в Firefox] (http://i.stack.imgur.com/AAKgZ.png). –

Вы можете сделать треугольник, играя с границами нулевой ширины/высоты DIV:

.triangleDiv { 
 
     width: 0; 
 
     height: 0; 
 
     border-style: solid; 
 
     border-width: 0 100px 100px 100px; 
 
     border-color: transparent transparent #000000 transparent; 
 
    }

<div class="triangleDiv"></div>

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

источник

2015-02-01 00:57:14 sideroxylon

Хороший, надеюсь, вы не возражаете, если я добавлю его как фрагмент. – Shomz

Вы можете делать то, что они сделали с вращением площади, но более распространенным решением является использование свойства границы:

.example { 
    position: relative; 
} 
.example:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; /* or wherever */ 
    left: 0; /* or wherever */ 
    border: 10px solid transparent; 
    border-bottom-color: #000; 
}

источник

2015-02-01 00:58:33 Jack

Предыдущие ответы хороши!

Просто хотел добавить, для таких элементов дизайна, что я всегда использую одну из двух вещей.

Псевдо элемент для создания элемента конструкции (как описано выше)
Псевдо элемент, содержащий элемент дизайна как SVG

Надежда, что помогает!

источник

2015-02-01 04:48:26

CSS? Как эта стрелка сделана?

ответ

Смежные вопросы