html - css氣泡，實現(xiàn)“倒三角（不知道算不算三角了）”可透明的。
問題描述
如圖顯示，右邊那個三角要如何實現(xiàn)？
問題解答
回答1：哈哈，看了一下，感覺很有意思。大致明白了樓主的意思，就是線是向內(nèi)而不是向外。
首先，我以為 border-radius 屬性可以實現(xiàn)，為什么這么認為？因為我覺得 border-radius 應(yīng)該可以有負值吧，正值是向外畫圓，負值不就是想內(nèi)畫圓了嗎。
還是自己太天真，border-radius 不支持負值。
想法走不通之后，在我腦海中又浮現(xiàn)了另一個想法，就是通過 遮蓋 來實現(xiàn)，剛剛試了一下，貌似可行，下面是代碼：
<span class='test'></span><style type='text/css'> .test{ display:inline-block; border-width:15px 0 15px 30px; border-color:transparent red; border-style:solid; position: relative; } .test::after{ content:’’; border: 30px solid white; border-radius: 50%; position: absolute; left: -32px; }</style>
大致說明一下思路，先是構(gòu)造一個向右的三角形，不會構(gòu)造的同學(xué)可以參考這篇文章 CSS 中的 border。接著畫一個偽類 after 實現(xiàn)一個圓，背景顏色和大背景顏色一樣，通過設(shè)置 position 把下面的三角形的下邊給遮蓋，就形成了最終的效果。
為了更直觀一些，我把 after 背景顏色改一下，
其實這樣做有很大的弊端，比如元素的實際寬度會變大等，
不過我覺得樓主的要求應(yīng)該算實現(xiàn)了吧。 OooO，雖然和樓主的樣式有點偏差。
回答2：那種不規(guī)則氣泡圖片一般不用代碼畫，一般圖片遮罩實現(xiàn)，canvas，dom也好。／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／-webkit-mask-image 可以輕松實現(xiàn)你要的效果
http://output.jsbin.com/jeruxul
<!DOCTYPE html><html> <head><meta charset='utf-8' /><title></title> </head> <style type='text/css'>p { width: 0px; height: 0px; border-top: 50px solid red; border-right: 50px solid blue; border-bottom: 50px solid yellow; border-left: 50px solid green;} </style> <body><p></p> </body></html>
氣泡尖角是個獨立的p，把不需要的邊框顏色變成底色，然后用定位移到想要的地方
網(wǎng)公網(wǎng)安備