聊天傍邊小尖角如何製作？純CSS製作小尖角效果

經常看到這樣的尖角，以前不懂，以為都是用圖片做出來的，後來驚奇的發現，原來很多都是用CSS做出來的，既美觀又節省資源，真是兩全其美啊！

那麼，用CSS怎麼實現這種效果呢？首先，來寫一個簡單的代碼：

代碼如下:

<p class="arrow"></p><style type="text/css">.arrow {    width:0;    height:0;    font-size:0;    border:solid 10px #000;}</style>

這兒，我們可以得到一個黑色的正方形，其實這是邊框組成的，因為p的寬度和高度都是0,。那麼，我們具體來看看，p寬度和高度都是0時，它的上下左右四邊框都是怎樣的，下面我們把邊框的各邊顏色分別設定為不同顏色：

<p class="arrow"></p><style type="text/css">.arrow {    width:0;    height:0;    font-size:0;    border:solid 10px;    border-color:#f00 #0f0 #00f #000;}</style>

我們發現，原來當p的寬度和高度都是0的時候，它的整個邊框是由四個三角形組成的，每一邊為一個三角形，那麼我們就可以利用這個特點，來做可愛的小尖角了。我們只要把不需要的三邊的邊框（三角形）的顏色設定為與背景相同即可，這樣就只能看到你想要的那個三角形了，然後再利用定位調整一下位置就可以了。具體代碼如下所示：

<p class="send">    <p class="arrow"></p></p><style type="text/css">body {    background:#4D4948;}.send {    position:relative;    width:150px;    height:35px;    background:#F8C301;    border-radius:5px; /* 圓角 */    margin:30px auto 0;}.send .arrow {    position:absolute;    top:5px;    right:-16px; /* 圓角的位置需要細心調試哦 */    width:0;    height:0;    font-size:0;    border:solid 8px;    border-color:#4D4948 #4D4948 #4D4948 #F8C301;}</style>

大功告成，效果如：

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤（2）－css視頻教程