1234567891011121314151617
.a2{ width: 0; height: 0; border-width:10px 20px 30px 40px; border-color: red blue green yellow; border-style: solid;}.a2{ width: 0; height: 0; border-width:30px 30px 30px 30px; border-color: transparent blue green transparent; border-style: solid;}/* border-width:上 右 下 左 */
通常写法如下:
12345678910
content: '';display: block;width: 0px;height: 0px;border-width: 10px 15px 0px 0;border-style: solid;border-color: transparent #ffac00 transparent transparent;position: absolute;bottom: 0px;right: 0px;
具体demo:
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .s0 { width: 0; height: 0; border-width: 10px 20px 30px 40px; border-color: red blue green yellow; border-style: solid; display: inline-block; } .s1 { width: 0; height: 0; border-width: 20px 20px 20px 20px; border-color: red red transparent transparent; border-style: solid; display: inline-block; } .s2 { width: 0; height: 0; border-width: 20px 10px 20px 30px; border-color: transparent red transparent transparent; border-style: solid; display: inline-block; } .s3 { width: 0; height: 0; border-width: 20px 20px 20px 20px; border-color: transparent red transparent transparent; border-style: solid; display: inline-block; } .s4 { width: 0; height: 0; border-width: 20px 30px 20px 10px; border-color: transparent red transparent transparent; border-style: solid; display: inline-block; } .s5 { width: 0; height: 0; border-width: 20px 40px 20px 0px; border-color: transparent red transparent transparent; border-style: solid; display: inline-block; } </style></head><body> <div class="s0"></div> <div class="s1"></div> <div class="s2"></div> <div class="s3"></div> <div class="s4"></div> <div class="s5"></div></body></html>