CSS 연설 거품 문제

나는 연설 거품을 만드는데 사용 된 CSS를 개작하고있다. CSS 소스는 http://forrst.com/posts/How_to_Make_a_Pure_CSS_Speech_Bubble_With_a_Drop-PU1입니다.CSS 연설 거품 문제

거품의 배경이 흰색으로 바뀌고 주황색 테두리가 추가됩니다. 내 문제는 거품의 하단을 따라 삼각형 주위에 경계를 표시 할 수 없다는 것입니다. 삼각형 자체는 흰색 (#fff)이어야하고 경계는 # DD4814입니다.

아래의 스크린 샷과 Fiddle 여기에서 : http://jsfiddle.net/tuGHT/. 누구든지 적절한 CSS에 대한 아이디어를 갖고 있습니까?

enter image description here

CSS

.bubble { 
background-color: #fff; 
border-radius: 7px; 
border: 2px solid #DD4814; 
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5), 
      4px 4px 0 hsla(0,0%,0%,.1); 
color: #333; 
display: inline-block; 
font-family: Ubuntu, sans-serif; 
font: 16px/25px; 
padding: 15px 25px; 
position: absolute; 
right: 20px; 
} 

.bubble:after, .bubble:before { 
border-bottom: 25px solid transparent; 
border-right: 25px solid #fff; 
bottom: -25px; 
content: ''; 
position: absolute; 
right: 25px; 
} 
.bubble:before { 
border-right: 25px solid hsla(0,0%,0%,.1); 
bottom: -28px; 
right: 22px; 
}

HTML은

<span class="bubble">Speech bubble right</span>

출처

2013-04-08 Clive van Hilten

당신이 할 수있는 순수 CSS와. 테두리가 필요한 경우 화살표 이미지를 사용해야합니다. – BenM

@BenM에 동의하지 않습니다. http://www.sitepoint.com/pure-css3-speech-bubbles/ http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ 당신은 사용할 수 –

모두 : 다음 기사를 참조하십시오 ':: before'와':: after'의 CSS 스타일을 다른 화살표로 사용합니다. 하나는 빨간색이고, 다른 하나는 흰색이 작습니다. – Dimser

이다 나는 보통 그것을 할 방법 : DEMO

기본적으로 약간 큰 다른 :before 또는 :after 요소가 첫 번째 요소 뒤에 위치해야합니다.

.bubble:before { 
    border-right: 25px solid hsla(0,0%,0%,.1); 
    bottom: -28px; 
    right: 22px; 
    z-index: 1; 
} 
.bubble:before { 
    border-right: 27px solid #DD4814; 
    border-bottom: 27px solid transparent; 
    bottom: -29px; 
    right: 23px; 
    z-index: 0; 
}

출처

2013-04-08 11:20:36 Turnip

[CSS 필터] (http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison)를 사용하여 그림자 효과를 향상시킬 수도 있습니다. [이 바이올린] (http://jsfiddle.net/cherryflavourpez/9UPZP/) (WebKit은 단순화를 위해서만 사용됨)에서 볼 수 있습니다. – CherryFlavourPez

첫 번째 정답은 3rror404로, 멋진 그림자 효과를 보여주는 CherryFlavourPez에게 감사드립니다! –

이 항상 고정 된 장소에 배치가 거품을 보여줍니다 코드

.bubble:before:after { 
top: 45px; 
left: -14px; 
bottom: auto; 
border-width: 15px 21px 0 0; 
border-color: transparent #ebea85; 
}

당신의 CSS에서 장소

출처

2013-11-14 07:47:24

CSS 연설 거품 문제

답변

관련 문제