CSS組件化之實心三角形

標籤：blog   技術   分享   border   class   ges   技術分享   mil   parent   

//等腰上三角.top-triangle {    width: 0;    height: 0;    border-style: solid;    border-width: 0 100px 120px 100px;    border-color: transparent transparent #007bff transparent;}//右上三角.right-top-triangle {    width: 0;    height: 0;    border-style: solid;    border-width: 0 120px 120px 0;    border-color: transparent #007bff transparent transparent;}//等腰右三角.top-triangle {    width: 0;    height: 0;    border-style: solid;    border-width: 100px 0 100px 120px;    border-color: transparent transparent transparent #007bff;}//右下三角.right-bottom-triangle {    width: 0;    height: 0;    border-style: solid;    border-width: 0 0 120px 120px;    border-color: transparent transparent #007bff transparent;}// 等腰下三角.bottom-triangle {    width: 0;    height: 0;    border-style: solid;    border-width: 120px 100px 0 100px;    border-color: #007bff transparent transparent transparent;}// 左下三角.left-bottom-triangle {    width: 0;    height: 0;    border-style: solid;    border-width: 120px 0 0 120px;    border-color: transparent transparent transparent #007bff;}//等腰左三角.left-triangle {    width: 0;    height: 0;    border-style: solid;    border-width: 100px 120px 100px 0;    border-color: transparent #007bff transparent transparent;}//左上三角.left-top-triangle {    width: 0;    height: 0;    border-style: solid;    border-width: 120px 120px 0 0;    border-color: #007bff transparent transparent transparent;}

 

CSS組件化之實心三角形