• 摘要：網上有很多html+css制作帶三角的矩形的方法,我在這裏列舉其中一種,兼容bootstrap3。我們先來看一個三角在左邊的對話框的效果圖矩形就不必說了,矩形的border-radius也不用說了,圓角可以自己設置,可以直接用bootstrap中的類。下面說下矩形左邊的小三角,我們可以這麽設置。右邊的矩形我們標記為類log-content,左邊的小三角我定義為類triangle,在html中的代碼是這樣:<divclass="log-content"

• 網上有很多html+css制作帶三角的矩形的方法,我在這裏列舉其中一種,兼容bootstrap3。

  我們先來看一個三角在左邊的對話框的效果圖
  

  矩形就不必說了,矩形的border-radius也不用說了,圓角可以自己設置,可以直接用bootstrap中的類。下面說下矩形左邊的小三角,我們可以這麽設置。右邊的矩形我們標記為類log-content,左邊的小三角我定義為類triangle,在html中的代碼是這樣:

  <div class="log-content"> 增加一些特點啊神馬的 如果想把 number的設置有兩種方式 第一種是在數據庫裏設置然後顯示 另外一種就是 </div><div class="triangle"></div>

  接下來看下css如何實現他們的無縫結合

  .triangle{ position:absolute; bottom:-6px; left:30px; overflow:hidden; width:13px; height:13px; background:#43B1F1; -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg); transform:rotate(135deg); left: -6px; top: 15px; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod=‘auto expand‘)"; filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.7071067811865475,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865475,SizingMethod=‘auto expand‘);}.log-content { position:relative; background:#43B1F1; border-radius:12px; text-align:left; color:white; padding: 20px;}

  這是利用css3的transform實現的。

  如果我想做一個三角在上面的對話框又該如何呢?

  

  這時候,僅需調整.triangle的css設置就好了

  .triangle{ position:absolute; overflow:hidden; width:13px; height:13px; background: white; display: none; -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg); transform:rotate(135deg); left: 47%; top: 48px; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod=‘auto expand‘)"; filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.7071067811865475,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865475,SizingMethod=‘auto expand‘);}

  通過改變left top bottom 的值,你會將小三角放到自己想要放的位置了。
以上是

html+css制作帶三角的矩形

的內容，更多

三角 矩形 制作 HTML css

的內容，請您使用右上方搜索功能獲取相關信息。

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

方法二：

前些天在牛課網上看到了一個百度的面試題，題目如下：

請用CSS實現如下圖的樣式，相關尺寸如圖示，其中dom結構為：
<div id=”demo”></div>

剛看到這個題目覺得無從下手，感覺一般這種不都是一個背景圖片嗎，怎麽還能用css寫的?? 後來看到網友的答案，試著運行了一下發現真的和圖上的一模一樣，最傷心的是看到答案竟然還看不懂。。覺得自己還是好水，仔細琢磨了一下，現將心得整理一下：

實現圖示的效果涉及到的知識主要有兩點：一個是before、after偽元素，一個是border

1、before 和 after 都是css中的偽元素，他們倆用法都差不多，通過給定一個屬性content給元素添加新的內容，不同的是before用來在元素前插入新內容，after用來在元素後面插入新內容。

比如有一個p元素：水

<p>水</p>
如果給這個p元素設置一個before：
p:before{
content:"上海自來";
}
這個p就變成了：上海自來水，content屬性的值就添加到了p元素內容的前面。
相反的，如果是用after：

p:after{
content:"來自海上";
}
這個p就會變成：水來自海上。
簡單的before、after使用就是這樣，一開始看的時候覺得好簡單，不就是插入個內容嗎，但實際上插內容不算什麽，最重要的是它能設！置！樣！式！一旦給它設置各種各樣的樣式之後這個偽元素就厲害了，比如題目中的尖角，題目只給了一個div我們，但是很明顯div只能弄出一個左邊的帶邊框正方形，右邊的尖角怎麽來的呢，那就可以靠這個偽元素了。

思路很簡單，先把正方形畫出來，然後通過before或者after變出一個尖角出來，放到正方形右上角去。div如下：

#demo{
width:100px;
height:100px;
background-color:#fff;
border: 2px #000 solid;
}
好，這個時候正方形已經出來了，但是三角形怎麽畫出來呢，這就要用到border了

2、以前使用border都是border：1px #000 solid，頂多換換顏色和邊框值，沒想到畫三角形也能靠它……

以前沒發現的原因在於使用border的時候總是1px、2px的，太細了，當把邊框變成20px的時候就有意思了，下面是一個邊長10px的正方形設置其邊框長也為10px：

我們知道可以通過設置border-left等等手動設置四個邊框為不同顏色，分別設置之後：

馬上看出靠譜，如果把這個div的寬度減小到0之後豈不就是四個三角形了，動手實驗：

果然是，那把上下右的顏色變透明之後就能得到一個三角形拉，在這裏要註意的是把其他三個邊透明是能得到一個三角形的，但是如果只設置左邊框而不設置其他三個邊框是得不到的，自己動手試下便知，因為如果只設置左邊框，而這個div的高度又為0，那這個左邊框是不會向上下兩端擴展的，只有當上或下也有邊框時才會呈現出一個三角形，所以我們可以把所有邊框透明掉，然後把左邊框顯示即可。比如下面這樣：

diiv{
width:0px;
height:0px;
border: 20px transparent solid;
border-left-color: #000;
}
就能得到這個效果了：

那把三角形放到正方形右側就很簡單了，有一點是那個正方形是缺了一段的，我們可以讓三角形顏色為白色覆蓋掉正方形的邊框，另外再用一個黑色的比白色三角形大一點的三角形放在白三角形下面，這樣就只漏出了三角形的兩條邊，所以這裏同時用到了before和after。

因為before和after插入的三角形是放在指定的位置的，所以它們的position都設置為絕對定位，那麽div就要設置成相對定位了：

#demo{
width:100px;
height:100px;
border: 2px #000 solid;
background-color:#fff;
position:relative;
}

首先是黑色的三角形：

#demo:before{
width:0px;
height:0px;
border: 10px transparent solid;
border-left-color: #000;
position:absolute;
top:20px;
left:100%;
content:""
}

註意content雖然沒有值，但是必須得加上。現在效果如下：

然後是比黑色三角形小一點點的白色三角形：

#demo:after{
width:0px;
height:0px;
border: 8px transparent solid;
border-left-color: #fff;
position:absolute;
top:22px;
left:100%;
content:""
}
註意白色三角形比褐色三角形要小，所以邊框長度就小2px，且top也大2px，效果如下：

由此這個題目就做完拉，當然相同的樣式可以整理下，最終樣式如下：

#demo{
width:100px;
height:100px;
border: 2px #000 solid;
background-color:#fff;
position:relative;
}
#demo:before, #demo:after{
width:0px;
height:0px;
border:transparent solid;
position:absolute;
left:100%;
content:""
}
#demo:before{
border-width:10px;
border-left-color: #000;
top:20px;
}
#demo:after{
border-width:8px;
border-left-color: #fff;
top:22px;
}

html如何繪制帶尖角（三角）的矩形