CSS樣式——仿微信語音對話框

一個(gè)小三角+一個(gè)圓角矩形

話不多說先上效果圖:


效果圖

我們把這個(gè)圖形拆分成一個(gè)圓角化了的矩形和一個(gè)旋轉(zhuǎn)后的矩形,然后背景色正好是圓角矩形的背景色


圖形拆分

所以有了清晰的思路,那下面就是代碼實(shí)現(xiàn)了

完整代碼

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title>微信對話框樣式</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            background: #eee;
        }
        .send {
            left: 500px;
            position: relative;
            width: 300px;
            height: 70px;
            background: #ffffff;
            border-radius: 5px;//外部矩形給圓角
            display: flex;//布局選用flex布局
            align-items: center;//內(nèi)部元素垂直居中
            border: #ccc 1px solid;//外邊界的樣式
        }

        .send .arrow {
            position: relative;//相對定位
            background: #fff;//背景色與外部的圓角矩形背景色一致
            width: 10px;//定義合適的寬高
            height: 10px;
            left: -7px;//調(diào)整出舒適的對接位置
            font-size: 0;
            border-bottom: #ccc solid 1px;//因?yàn)槿切蔚腷order只需要展示出兩條邊
            border-left: #ccc solid 1px;
            box-sizing: border-box;//將盒子設(shè)置為border-box這樣不會因?yàn)榧恿薭order而變寬
            transform:rotate(45deg);//將小矩形旋轉(zhuǎn)個(gè)45度從而做出三角形的突出角
            -ms-transform:rotate(45deg);    /* IE 9 */
            -moz-transform:rotate(45deg);   /* Firefox */
            -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
            -o-transform:rotate(45deg);     /* Opera */
        }
    </style>
</head>
<body>
   <div class="send">
      <div class="arrow"></div>
   </div>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市植酥,隨后出現(xiàn)的幾起案子诬滩,更是在濱河造成了極大的恐慌鸯匹,老刑警劉巖雾消,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異挫望,居然都是意外死亡立润,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門媳板,熙熙樓的掌柜王于貴愁眉苦臉地迎上來桑腮,“玉大人,你說我怎么就攤上這事蛉幸∑铺郑” “怎么了丛晦?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長提陶。 經(jīng)常有香客問我烫沙,道長,這世上最難降的妖魔是什么隙笆? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任锌蓄,我火速辦了婚禮,結(jié)果婚禮上撑柔,老公的妹妹穿的比我還像新娘瘸爽。我一直安慰自己,他們只是感情好铅忿,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布剪决。 她就那樣靜靜地躺著,像睡著了一般檀训。 火紅的嫁衣襯著肌膚如雪柑潦。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天肢扯,我揣著相機(jī)與錄音妒茬,去河邊找鬼。 笑死蔚晨,一個(gè)胖子當(dāng)著我的面吹牛乍钻,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播铭腕,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼银择,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了累舷?” 一聲冷哼從身側(cè)響起浩考,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎被盈,沒想到半個(gè)月后析孽,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡只怎,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年袜瞬,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片身堡。...
    茶點(diǎn)故事閱讀 40,865評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡邓尤,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情汞扎,我是刑警寧澤季稳,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站澈魄,受9級特大地震影響景鼠,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜一忱,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一莲蜘、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧帘营,春花似錦票渠、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至禀梳,卻和暖如春杜窄,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背算途。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工塞耕, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人嘴瓤。 一個(gè)月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓扫外,卻偏偏與公主長得像,于是被迫代替她去往敵國和親廓脆。 傳聞我的和親對象是個(gè)殘疾皇子筛谚,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 1、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地?cái)?shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,988評論 3 119
  • 霍立軍停忿,男驾讲,漢族,1968年出生于河北邱縣一個(gè)雕刻世家席赂,自幼喜歡雕刻吮铭,尤其喜歡根雕、木雕颅停。雖為霍氏雕刻22代...
    依嚸嚸任性閱讀 2,058評論 0 0
  • 要有獨(dú)立思考的能力沐兵,要有自己的想法。沒有什么是標(biāo)準(zhǔn)的答案便监,時(shí)代在更新,規(guī)則也在不斷的被定義。到那都是別人的事烧董,你要...
    f9f1de48dc41閱讀 194評論 0 0
  • 若思念歸處毁靶,一片紅瓦點(diǎn)綴青山碧水,悲壯縈繞逊移,不復(fù)回预吆,退無可退的往前! 隨著年紀(jì)的增長胳泉,不知道什么時(shí)候開始就不喜歡喧...
    妙齋居士閱讀 232評論 0 0
  • 為期三周的調(diào)研今天正式結(jié)束啦拐叉,認(rèn)識了很多人,看到了很多事扇商。反觀自己需要學(xué)習(xí)的地方太多了凤瘦,多到我自己都不知道該怎么去做 。
    i_littlered閱讀 256評論 0 0