CSSを使って三角形を作成する

html代コード:

css代番号：

.div{
border-top:40px ソリッド #ff0077;
border-left:40px ソリッド #004444;
border-bottom:40px ソリッド #999999;
border-right:40px ソリッド #333333;
高さ: 0px;
幅: 0px;
}

效果:

现在一一分解完了

html代：

< ;/div>

css代番号：

.triggle-top,.triggle-left,.triggle-bottom,.triggle-right{
border:100px 単色透明;
高さ: 0;
幅: 0;
}
.triggle-top{
border-top -color:#ff0077;
}
.triggle-left{
border-left-color:#004444;
}
.triggle-bottom{
border-bottom-color:#999999;
}
.triggle-right{
境界線の右の色: #333333;
}

效果图:

总之：制作小三角はborderプロパティを利用して制作しているものです

额外：

また有我想说的就是一般一标签比如：

これ删除x可用:after{content:'x'}来实现

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。