Как добавить стрелку в div?

Я пытаюсь создать метку ошибки для div со стрелкой, но проблема с центрированием.Как добавить стрелку в div?

я получаю: enter image description here

мне нужно что-то вроде: enter image description here

HTML:

<div class="error-label-arrow"></div> 
<div class="error-label">This field is required.</div>

CSS:

div.error-label{ 
    padding: 7px 10px 0 4px; 
    color: #fff; 
    background-color: #DA362A; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 

div.error-label-arrow{ 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-right:10px solid #DA362A; 
    float: left; 
}

возможно ли это?

Вот fiddle

источник

2013-02-11 Kin

jsfiddle пожалуйста. – Chris

Добавить прописку? Или добавьте скрипку, и я покажу вам, что я имею в виду. – Liam

Вы можете использовать фоновое изображение вместо создания стрелки с помощью CSS, затем дать фиксированную высоту для div и 'vertical-align: center;' должно работать. Он также будет работать в старых браузерах. –

Вы можете использовать CSS Pseudo classes, чтобы сделать это, поэтому вам не нужен элемент "стрелка":

div.error-label{ 
    padding:10px; 
    color: #fff; 
    background-color: #DA362A; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    width:190px; 
    margin:30px; 
} 

div.error-label:before { 
    content: ' '; 
    height: 0; 
    position: absolute; 
    width: 0; 
    left:10px; 
    border: 10px solid transparent; 
    border-right-color: #DA362A; 
}

Демо-версия: http://jsfiddle.net/p9ZPg/

источник

2013-02-11 09:11:52 Curt

можно удалить «margin: 30px;», потому что он создает много свободного пространства в области вокруг. – Kin

@Kirix Вот пример без поля: http://jsfiddle.net/p9ZPg/1/ – Curt

@Kirix Я применил только «margin», чтобы вы могли видеть стрелку на экране. Примечание. Изменения в отступы/маржа потребуют изменений в 'left' на псевдокласс – Curt

div.error-label{ 
    padding: 7px 10px 0 4px; 
    color: #fff; 
    background-color: #DA362A; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    width: 150px; 
    margin-left: 5px; 
} 

div.error-label-arrow{ 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-right:10px solid #DA362A; 
    float: left; 
    height: 1px; 
    margin-top: 3px; 
}

Вот fiddle

источник

2013-02-11 09:09:19 DON

Как добавить стрелку в div?

ответ

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