css樣式對話方塊小三角寫法
阿新 • • 發佈：2020-09-20
三角寫法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小三角</title> </head> <style> .box{ /*原理：一個標籤的高寬都為0時，給他設定每一個邊為不同顏色，那麼它將是一個由四個不同顏色三角形組成的正方形*/ width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid green; border-bottom: 50px solid yellow; border-left: 50px solid blue; } /*顯示三角形：只要把盒子設定為0寬高，其它邊設定為透明色，想要的三角形單獨設定為有色即可*/ .box2{ margin: 0 auto; /*水平居中一下*/ width: 0; /*1.寬高必須為0*/ height: 0; /*2.所有邊都設定為透明*/ border: 50px solid transparent; /*3.向下的三角形：把上邊設定有色即可；向右的三角，把左邊設定有色；其它同理*/ border-top-color: red; } </style> <body> <div class="box"></div> <div class="box2"></div> </body> </html>
box：
box2：
相容問題加兩行
font-size:0;
line-height:0;
實際運用：對話方塊的三角
<style> /*對話方塊帶上三角*/ .box3{ width: 500px; height: 200px; background-color: skyblue; margin:0 auto; position: relative; /*定位：子絕父相*/ } .box3 span{ /*上三角形*/ width: 0;/*寬高必須為0*/ height: 0; line-height: 0;/*相容*/ font-size: 0; border: 25px solid transparent;/*所有邊框透明*/ border-bottom-color: skyblue; /*單獨設定下邊框有色，實現向上三角*/ /*定位：貼在父元素上邊，要向上移動。一個邊框25px兩個邊框，向上移動即-50px*/ position: absolute; top:-50px; right: 0px; } </style> <div class="box3"> <span></span> </div>