Skip to main content

[Snippet-CSS] 三角形 Triangle

.triangle-left {  width: 0px;  height: 0px;  border-right: 60px solid $npm; // 高  border-top: 30px solid transparent; // 底  border-bottom: 30px solid transparent; // 底}
.triangle-top {  width: 0px;  height: 0px;  border-right: 30px solid transparent; // 底  border-left: 30px solid transparent; // 底  border-bottom: 60px solid $green; // 高}
.triangle-bottom {  width: 0px;  height: 0px;  border-right: 30px solid transparent; // 底  border-left: 30px solid transparent; // 底  border-top: 60px solid $heroku; // 高}
.triangle-lefttop {  width: 0px;  height: 0px;  border-right: 60px solid transparent;  border-top: 60px solid $npm;}
.triangle-righttop {  width: 0px;  height: 0px;  border-left: 60px solid transparent;  border-top: 60px solid $green;}
.triangle-leftbottom {  width: 0px;  height: 0px;  border-right: 60px solid transparent;  border-bottom: 60px solid $npm;}
.triangle-rightbottom {  width: 0px;  height: 0px;  border-left: 60px solid transparent;  border-bottom: 60px solid $green;}

程式範例#

See the Pen [CSS] Triangle by PJCHEN (@PJCHENder) on CodePen.