Не нравятся результаты поиска? Попробуйте другой поиск!

Как сделать красивую стрелку на css


     30.08.2012    Общие вопросы по вёрстке, Стили (CSS)    7206

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

Как прикрутить к нему arrow(не картинку)?
Всё что получилось это стрелочка в центре экрана, снизу, почему-то она не хочет "приклеиваться" к блоку.
Помогите пожалуйста, спасибо.

Ответил: Dymatize


<div class="btn">Привет как дела?!<span></span></div>


<style>
.btn {
background-color: #F5F5F5;
background: -o-linear-gradient(top, #E3E3B9, #E8E8C5);
background-repeat: repeat-x;
border: 1px solid #E6E6E6;
border-bottom:0;
border-radius: 4px;
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.196), 0px 1px 2px rgba(0, 0, 0, 0.047);
color: #333333;
display: inline-block;
font-size: 14px;
line-height: 20px;
margin-bottom: 0px;
padding: 4px 14px;
text-align: center;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.749);
vertical-align: middle;
position:relative;
}
.btn span {
border-top: 10px solid #F5F5F5;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
position: absolute;
left: 22px;
top: 28px;
}
</style>

Комментарии пользователей (7)

Dymatize
6

111 | 104

Dymatize - 30 августа 2012 20:09 - Юзер.

Какую ещё стрелку?
"Комментариев нет (стрелка) - эту чтоль?

wulv
131 | 49

wulv - 30 августа 2012 20:27 - Юзер

Привет ПафНутиЙ! Я знаю что это bootstrap, но не знаю как осуществить это. Пытался, но всё что получалось это стрелка в центре, не хочет она присабачиваться к блоку

Стрелочку надо как вот ТУТА
Привет Dymatize, сейчас объясню подробнее.
Вот с помощью стилей сделал:

А надо вот так:


Помогите пожалуйста ребят.

Dymatize
6

111 | 104

Dymatize - 30 августа 2012 20:33 - Юзер.

счас сделаю

Dymatize
6

111 | 104

Dymatize - 30 августа 2012 20:38 - Юзер.

<div class="btn">Привет как дела?!<span class="trs"></span></div>


<style>
.btn {
background-color: #F5F5F5;
background: -o-linear-gradient(top, #E3E3B9, #E8E8C5);
background-repeat: repeat-x;
border: 1px solid #E6E6E6;
border-bottom:0;
border-radius: 4px;
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.196), 0px 1px 2px rgba(0, 0, 0, 0.047);
color: #333333;
display: inline-block;
font-size: 14px;
line-height: 20px;
margin-bottom: 0px;
padding: 4px 14px;
text-align: center;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.749);
vertical-align: middle;
}
.trs {
border-top: 10px solid #F5F5F5;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
position: absolute;
left: 22px;
top: 37px;
}
</style>

Dymatize
6

111 | 104

Dymatize - 30 августа 2012 20:39 - Юзер.

или так


Dymatize
6

111 | 104

Dymatize - 30 августа 2012 20:51 - Юзер.

я фиг знает куда ты её втыкать будешь, так что сделай лучше так...тогда так её точно не перекосит.


wulv
131 | 49

wulv - 30 августа 2012 20:55 - Юзер

Dymatize,
Работает, спасибо большое!, сейчас буду играться с размерами.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы