不能使用组件解决,需要写出一个类似气泡的矩形。
如图:
矩形带尖角的
实现图示的效果涉及到的知识主要有两点:一个是before、after伪元素,一个是border
1、before 和 after 都是css中的伪元素,他们俩用法都差不多,通过给定一个属性content给元素添加新的内容,不同的是before用来在元素前插入新内容,after用来在元素后面插入新内容。
比如有一个p元素:水
水
如果给这个p元素设置一个before:p:before{
content:“上海自来”;
}
这个p就变成了:
上海自来水
,content属性的值就添加到了p元素内容的前面。
相反的,如果是用after:
p:after{
content:“来自海上”;
}
这个p就会变成:
水来自海上。
简单的before、after使用就是这样,一开始看的时候觉得好简单,不就是插入个内容吗,但实际上插内容不算什么,最重要的是它能设!置!样!式!一旦给它设置各种各样的样式之后这个伪元素就厉害了,比如图中的尖角,一个div,但是很明显div只能弄出一个左边的带边框正方形,右边的尖角怎么来的呢,那就可以靠这个伪元素了。
思路很简单,先把正方形画出来,然后通过before或者after变出一个尖角出来,放到正方形右上角去。
#demo{
width:100px;
height:100px;
background-color:#fff;
border: 2px #000 solid;
}
好,这个时候正方形已经出来了,但是三角形怎么画出来呢,这就要用到border了
2、以前使用border都是border:1px #000 solid,顶多换换颜色和边框值,没想到画三角形也能靠它……
以前没发现的原因在于使用border的时候总是1px、2px的,太细了,当把边框变成20px的时候就有意思了&