標籤：style blog http io os ar for sp div
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title><style> /*三角形*/ /* div{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid;} */ /*帶角框*/ div{width:100px;height:100px;border:2px solid;} div::before{content:"";display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid black;position:relative;top:10px;left:100px;} div::after{content:"";display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid white;position:relative;top:-6px;left:98px;} </style></head><body><div></div></body></html>
實現三角形的原理：1，div的border產生是向外擴的，2,當div有相鄰border時，拐角處會以一種各佔一半的三角拼合。所以當設這div的寬高為0和0時，如果它有四個border的話，就會組成一個正方形，每邊分別為一個等腰三角形，此時若設任意三邊對望的兩個邊為透明色（transparent）時，剩下的一邊為一個等腰三角形。
帶角框實現原理：利用兩個三角形的相對定位使產生視覺上的相減形成不閉合的角號（“>”）。
css2----實現三角形和帶角框
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
