Welcome</div> код CSS .bubble"> Welcome</div> код CSS .bubble"> Welcome</div> код CSS .bubble" />

как добавить границу к CSS только речевой пузырь

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

HTML

<div class="bubble">Welcome</div>

код CSS

.bubble {
height: 30px;
width: 574px;
background-color: #9FC175;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),3px 3px 0 hsla(0,0%,0%,.1);
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
position: absolute;
}

.bubble:after, .bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #9FC175;
bottom: -25px;
content: '';
position: absolute;
right: 25px;
}

.bubble:before {
border-right: 25px solid hsla(0,0%,0%,.1);
bottom: -28px;
right: 22px;
}

Результаты

enter image description here

if i added border code border:2px solid #493A34; at class .bubble

Результаты

enter image description here

проблема

Как добавить границу к стреле также? ~ любая идея

Править: Вот связь скрипки с тень коробки примененный.

3
nl ja de

2 ответы

Можно сделать немного большую коричневую стрелу с: после psudo-элемента и положения это позади зеленой стрелы меньшего размера (сделанный с: прежде), и ниже на 2 пкс, чтобы создать краевой эффект.

here's the fiddle: http://jsfiddle.net/rhGCb/

И css:

.bubble {
  border:2px solid #493A34;
height: 30px;
width: 574px;
background-color: #9FC175;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),3px 3px 0 hsla(0,0%,0%,.1);
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
position: absolute;
}



.bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #493A34;
bottom: -27px;
content: '';
position: absolute;
right: 23px;

}


  .bubble:after {
border-bottom: 25px solid transparent;
border-right: 25px solid #9FC175;
bottom: -23px;
content: '';
position: absolute;
right: 25px;
}
2
добавлено
Проведенные часы и найденный многими ответами еще, где, но все не работают правильно, но твой работает прекрасный..:) большое спасибо, I' ll изучают вашу удивительную идею каждая часть его.
добавлено автор Reham Fahmy, источник

Что-то вроде уловки, но можно добавить тень коробки , который ведет себя как граница (значение, , пятно установлено в 0 ):

.speech-bubble{
    /* ... */

    /* 2px = border-width #333 = border-color */
    -webkit-box-shadow:0 0 0 2px #333;
            box-shadow:0 0 0 2px #333;
}
0
добавлено
вы все еще не получаете тот эффект! наконечник все еще появляется без границ...jsfiddle.net/aEmGa
добавлено автор Praveen Puglia, источник
я думаю, что тень была бы по пузырю. Или граница пузыря была бы по стреле.
добавлено автор circusdei, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)