小編給大家分享一下HTML+CSS如何實(shí)現(xiàn)好看的三角形提示框樣式，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站云計(jì)算的互聯(lián)網(wǎng)服務(wù)提供商,擁有超過(guò)13年的服務(wù)器租用、成都溫江機(jī)房、云服務(wù)器、網(wǎng)頁(yè)空間、網(wǎng)站系統(tǒng)開(kāi)發(fā)經(jīng)驗(yàn)，已先后獲得國(guó)家工業(yè)和信息化部頒發(fā)的互聯(lián)網(wǎng)數(shù)據(jù)中心業(yè)務(wù)許可證。專業(yè)提供云主機(jī)、網(wǎng)頁(yè)空間、域名注冊(cè)、VPS主機(jī)、云服務(wù)器、香港云服務(wù)器、免備案服務(wù)器等。

想要用CSS實(shí)現(xiàn)三角形提示框樣式需要用到很多CSS中的屬性，比如：display屬性，border-radius圓角，position定位等等，如有不清楚的小伙伴可以看看我以前的文章，之前都有介紹過(guò)，或者訪問(wèn) CSS視頻教程 。

實(shí)例描述：給一個(gè)div，用border-radius，before，border-top等屬性，在提示框的左上角和右下角加三角形，制作一個(gè)三角形提示框，具體代碼如下：

HTML部分：

<div class="main">
   <p>這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容</p>
</div>

CSS部分：

*{
      margin: 0;
      padding: 0;
     }  
     .main{
      width: 120px;
      display: inline-block;
      font-size: 14px;
      color: #333;
      line-height: 28px;
      background: #F0981C;
      position: relative;
      padding: 10px;
      -webkit-border-radius:5px;
      -moz-border-radius:5px;
      : 5px;
     }
     /*左三角*/
     .main:before{
      content: ' ';
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-right: 12px solid #F0981C;
      position: absolute;
      top: 15px;
      left: -12px;
     }
     /*右三角*/
     .main:after{
      content: ' ';
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 12px solid #F0981C;
      position: absolute;
      bottom: 15px;
      right: -12px;
     }

效果圖：

看完了這篇文章，相信你對(duì)HTML+CSS如何實(shí)現(xiàn)好看的三角形提示框樣式有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站欄目：HTML+CSS如何實(shí)現(xiàn)好看的三角形提示框樣式
標(biāo)題鏈接：http://www.chinadenli.net/article38/gisdpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、定制開(kāi)發(fā)、電子商務(wù)、響應(yīng)式網(wǎng)站、微信公眾號(hào)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)