夏天,一束束剑麻,开出的花,如一串串玲珑的 "铃铛 ",在陽光下争艳斗丽地开放。花期最长的要数百日红了,它在烈日下顽强地开出硕大的、玖瑰红的花朵。每天早晨,树下的石凳上,都坐满了晨读的大哥哥大姐姐,这也成了校园的一处风景。
创建一个100%CSS的气泡,我们从下面的标记考试。
XML/HTML Code复制内容到剪贴板
- <divclass="speech-bubble">Hithere!</div>
接下来,应用一些基本样式。
CSS Code复制内容到剪贴板
- .speech-bubble{
- position:relative;
- background-color:#292929;
- width:200px;
- height:150px;
- line-height:150px;/*垂直居中*/
- color:white;
- text-align:center;
- }
箭头将通过after伪元素实现。
CSS Code复制内容到剪贴板
- .speech-bubble:after{
- content:'';
- }
- :before和:after伪元素可以用来在元素内容之前或之后插入生成内容。接下来,只是简单复制箭头,并定位到适当的位置。我们开始通过绝对定位的内容,重置宽度和高度,并应用边界颜色。
- .speech-bubble:after{
- content:'';
- position:absolute;
- width:0;
- height:0;
- border:10pxsolid;
- border-color:redgreenblueyellow;
- }
因为我们知道我们想要向下的箭头,上面的图片表明,除了红色(或上)边境其他的都应该被省略,或者设置为透明。
CSS Code复制内容到剪贴板
- .speech-bubble:after{
- content:'';
- position:absolute;
- width:0;
- height:0;
- border:10pxsolid;
- border-top-color:red;
- }
当创建CSS形状是,因为我们不能使用width属性来指定箭头的宽度,而是应该使用border-width属性。在这种情况下,箭头应该更大点;所以border-width可以增加到15px。我们将箭头定位到容器的底部居中,通过利用top和left属性。
CSS Code复制内容到剪贴板
- .speech-bubble:after{
- content:'';
- position:absolute;
- width:0;
- height:0;
- border:15pxsolid;
- border-top-color:red;
- top:100%;
- left:50%;
- }
到这里就差不多了;最后一个步骤是更新箭头的颜色和容器的背景颜色相同。定位也需要修改,根据边界的宽度(15 px)。当我们在这里,我们还将应用一个微妙border-radius属性来使容器更像气泡。
CSS Code复制内容到剪贴板
- .speech-bubble{
- /*…其他样式*/
- border-radius:10px;
- }
- .speech-bubble:after{
- content:'';
- position:absolute;
- width:0;
- height:0;
- border:15pxsolid;
- border-top-color:#292929;
- top:100%;
- left:50%;
- mar