目標(biāo)
用css的方式實(shí)現(xiàn)如下圖樣式的提示框
解決方案
考慮以多個(gè)部件組裝的方式實(shí)現(xiàn)沛鸵。分為矩形提示框和邊上的小三角形批钠。
矩形提示框晋被，就是普通的div荔烧。自不用說吱七。
問題的關(guān)鍵就是如何畫出小三角形。這時(shí)應(yīng)該想到很多方案鹤竭，比如用一個(gè)小圖片表示踊餐，或者用svg路徑表示，再或者用canvas的畫圖方法實(shí)現(xiàn)等等臀稚。但是本文講的是一種非常規(guī)方法吝岭，完全靠css的方式實(shí)現(xiàn)出這個(gè)小三角形。
采用css的border屬性實(shí)現(xiàn)。如果不理解html元素的盒子模型和css的border屬性窜管，是幾乎不可能想到這種解決方案的散劫。
原理說明
前提
必須首先知道針對(duì)html元素的css盒子模型。如下圖幕帆，html元素的css樣式分四層模型获搏，從外到內(nèi)，依次是margin->border->padding->content失乾。
下面是對(duì)一個(gè)div元素的css設(shè)置
<div><div>
div{
margin: 2px;
border: 2px solid black;
padding: 4px;
width: 10px;
height: 10px;
background: red;
}
該div的顯示如下：
該div對(duì)應(yīng)的css盒子模型如下：
通過上圖常熙，可見清晰的看到四層模型對(duì)應(yīng)的四個(gè)屬性以及其參數(shù)值。
其中每個(gè)屬性碱茁，均可以單獨(dú)設(shè)置其上裸卫、下、左纽竣、右四個(gè)方向的值墓贿。
我們巧妙的設(shè)置一下margin,border,padding,width,height的值，就會(huì)看到下面一個(gè)有趣的現(xiàn)象退个。
<div></div>
<style>
div{
margin: 0px;
border-width: 10px;
border-style: solid;
border-color: black red blue yellow;
padding: 0px;
width: 0px;
height: 0px;
}
</style>
從圖上可以看出募壕，三角形已經(jīng)初露端倪了， 接下來只需要把其中一條邊顏色保留语盈，其余三條邊顏色設(shè)置為透明舱馅，不就得到一個(gè)小三角形了嗎。
<div></div>
<style>
div{
margin: 0px;
border-width: 10px;
border-style: solid;
border-color: black transparent transparent;
padding: 0px;
width: 0px;
height: 0px;
}
</style>
一步一步實(shí)現(xiàn)
通過上面的原理說明刀荒，用css的border屬性巧妙的創(chuàng)造出一個(gè)三角形已經(jīng)不成問題代嗤。
下面就是組合問題了。先把矩形div和小三角形組合缠借，逐步實(shí)現(xiàn)目標(biāo)那樣的提示框干毅。
一、組合實(shí)現(xiàn)提示框外形
<!--組合的提示框組件-->
<div class="tipComponent">
<div class="rectangle">
css實(shí)現(xiàn)邊上帶小三角的提示框
</div>
<div class="triangle"></div>
</div>
<style>
.rectangle{
width: 400px;
height: 100px;
border: 1px solid black;
background: red;
}
.triangle{
margin: 0px;
border-width: 10px;
border-style: solid;
border-color: red transparent transparent;
padding: 0px;
width: 0px;
height: 0px;
left: 195px;
position: absolute;
}
</style>
通過上圖顯示泼返，會(huì)發(fā)現(xiàn)一個(gè)明顯不和諧的地方硝逢，矩形框有邊框，小三角沒邊框绅喉。
小三角本身就是用border實(shí)現(xiàn)的渠鸽，也就意味著不能再使用border為其添加邊框了。怎么為小三角添加邊框呢柴罐？
還是組合徽缚。我們可以同時(shí)實(shí)現(xiàn)兩個(gè)不同顏色的三角形，然后通過疊加革屠，讓兩者稍微錯(cuò)開一點(diǎn)凿试，不就能顯示出邊框了嗎排宰。
二、組合實(shí)現(xiàn)帶邊框的三角形
<!--組合的提示框組件-->
<div class="tipComponent">
<div class="rectangle">
css實(shí)現(xiàn)邊上帶小三角的提示框
</div>
<div class="triangle">
<div class="triangle_inner"></div>
</div>
</div>
<style>
.rectangle{
width: 400px;
height: 100px;
border: 1px solid black;
background: red;
}
.triangle{
margin: 0px;
border-width: 10px;
border-style: solid;
border-color: black transparent transparent;
padding: 0px;
width: 0px;
height: 0px;
left: 195px;
position: absolute;
}
.triangle_inner{
margin: 0px;
border-width: 10px;
border-style: solid;
border-color: red transparent transparent;
padding: 0px;
width: 0px;
height: 0px;
position: absolute;
}
</style>
通過上圖發(fā)現(xiàn)那婉，兩個(gè)三角形并沒有重合板甘，因?yàn)閮?nèi)三角div位于在外三角div的內(nèi)部，所以其開始繪制的位置是從外部div的內(nèi)容區(qū)域開始繪制的详炬，也就是上圖那樣虾啦。
通過適當(dāng)?shù)钠瓶梢越鉀Q這個(gè)問題，
<!--組合的提示框組件-->
<div class="tipComponent">
<div class="rectangle">
css實(shí)現(xiàn)邊上帶小三角的提示框
</div>
<div class="triangle">
<div class="triangle_inner"></div>
</div>
</div>
<style>
.rectangle{
width: 400px;
height: 100px;
border: 1px solid black;
background: red;
}
.triangle{
margin: 0px;
border-width: 10px;
border-style: solid;
border-color: black transparent transparent;
padding: 0px;
width: 0px;
height: 0px;
left: 195px;
position: absolute;
}
.triangle_inner{
margin: 0px;
border-width: 10px;
border-style: solid;
border-color: red transparent transparent;
padding: 0px;
width: 0px;
height: 0px;
left: -10px;
top:-11px;
position: absolute;
}
</style>
至此痕寓，本文開頭要實(shí)現(xiàn)的目標(biāo)完成。
元素的position設(shè)置為absolute后蝇闭，其left或top設(shè)置的偏移是相對(duì)于position不是static的第一個(gè)父元素而言的呻率。這是一個(gè)知識(shí)點(diǎn)
