標籤：normal doc mic height for pos code set margin
首先，來寫一個簡單的代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .arrow { width:0; height:0; font-size:0; border:solid 10px; border-color:#f00 #0f0 #00f #000; } </style></head><body> <div class="arrow"></div></body></html>
我們發現，原來當div的寬度和高度都是0的時候，它的整個邊框是由四個三角形組成的，每一邊為一個三角形，那麼我們就可以利用這個特點，來做可愛的小尖角了。我們只要把不需要的三邊的邊框（三角形）的顏色設定為與背景相同即可，這樣就只能看到你想要的那個三角形了，然後再利用定位調整一下位置就可以了。具體代碼如下所示：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> 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></head><body> <div class="send"> <div class="arrow"></div> </div></body></html>
html5實現尖角號
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
