Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Как сделать красивую стрелку на css

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


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

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

Как прикрутить к нему 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
Юзер.

Dymatize - 30 августа 2012 20:09 -

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

wulv
Юзер

wulv - 30 августа 2012 20:27 -

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

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

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


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

Dymatize
Юзер.

Dymatize - 30 августа 2012 20:33 -

счас сделаю

Dymatize
Юзер.

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
Юзер.

Dymatize - 30 августа 2012 20:39 -

или так


Dymatize
Юзер.

Dymatize - 30 августа 2012 20:51 -

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


wulv
Юзер

wulv - 30 августа 2012 20:55 -

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

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

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

наверх