真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

HTML+CSS如何實(shí)現(xiàn)好看的三角形提示框樣式

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

創(chuàng)新互聯(lián)建站云計(jì)算的互聯(lián)網(wǎng)服務(wù)提供商,擁有超過13年的服務(wù)器租用、成都溫江機(jī)房、云服務(wù)器、網(wǎng)頁(yè)空間、網(wǎng)站系統(tǒng)開發(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定位等等，如有不清楚的小伙伴可以看看我以前的文章，之前都有介紹過，或者訪問 CSS視頻教程。

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

HTML部分：


   這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容

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;
     }

效果圖：

HTML+CSS如何實(shí)現(xiàn)好看的三角形提示框樣式