Let's take a look at two renderings:
CSS:
The code is as follows: |
Copy code |
/* Dialog bubbles Usage: use the. speech-bubble and. speech-bubble-DIRECTION classes. <Div class = "speech-bubble-top"> Hi there </div> */ . Speech-bubble { Position: relative; Background-color: #292929; Width: 200px; Height: 150px; Line-height: 150px;/* vertical center */ Color: white; Text-align: center; Border-radius: 10px; Font-family: sans-serif; } . Speech-bubble: after { Content :''; Position: absolute; Width: 0; Height: 0; Border: 15px solid; } /* Arrow position */ . Speech-bubble-top: after { Border-bottom-color: #292929; Left: 50%; Bottom: 100%; Margin-left:-15px; } . Speech-bubble-right: after { Border-left-color: #292929; Left: 100%; Top: 50%; Margin-top:-15px; } . Speech-bubble-bottom: after { Border-top-color: #292929; Top: 100%; Left: 50%; Margin-left:-15px; } . Speech-bubble-left: after { Border-right-color: #292929; Top: 50%; Right: 100%; Margin-top:-15px; } HTML: <! DOCTYPE html> <Html> <Head> <Link rel = "stylesheet" type = "text/css" href = "maopao.css"> <Title> Test </title> </Head> <Body> <Div class = "speech-bubble-top"> Arrow at top </Div> <Br/> <Div class = "speech-bubble-bottom"> Arrow at the bottom </Div> <Br/> <Div class = "speech-bubble-left"> Arrow on the left </Div> <Br/> <Div class = "speech-bubble-right"> Arrow on the right </Div> </Body> </Html> |
This only applies to css and does not use images.