css 畫三角形

CSS三角形繪制方法

#triangle-up {
????width: 0;
????height: 0;
????border-left: 50px solid transparent;
????border-right: 50px solid transparent;
????border-bottom: 100px solid red;
}

#triangle-down {
????width: 0;
????height: 0;
????border-left: 50px solid transparent;
????border-right: 50px solid transparent;
????border-top: 100px solid red;
}

#triangle-left {
????width: 0;
????height: 0;
????border-top: 50px solid transparent;
????border-right: 100px solid red;
????border-bottom: 50px solid transparent;
}

#triangle-right {
????width: 0;
????height: 0;
????border-top: 50px solid transparent;
????border-left: 100px solid red;
????border-bottom: 50px solid transparent;
}

#triangle-topleft {
????width: 0;
????height: 0;
????border-top: 100px solid red;
????border-right: 100px solid transparent;
}

#triangle-topright {
????width: 0;
????height: 0;
????border-top: 100px solid red;
????border-left: 100px solid transparent;?
}

#triangle-bottomleft {
????width: 0;
????height: 0;
????border-bottom: 100px solid red;
????border-right: 100px solid transparent;
}

#triangle-bottomright {
????width: 0;
????height: 0;
????border-bottom: 100px solid red;
????border-left: 100px solid transparent;
}

資源：純CSS繪制三角形（各種角度）

轉載于:https://www.cnblogs.com/xiaochechang/p/5794492.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/395252.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/395252.shtml
英文地址，請注明出處：http://en.pswp.cn/news/395252.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！