css制作的圓，三角形，橢圓，箭頭圖標

來源：懂視網責編：小采時間：2020-11-27 16:41:28

css制作的圓，三角形，橢圓，箭頭圖標

css制作的圓，三角形，橢圓，箭頭圖標:圓： .yuan{ width:100px; height:100px; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; background-color:red; } 橢圓 .oval {

推薦度：

點擊下載本文 文檔為doc格式

導讀css制作的圓，三角形，橢圓，箭頭圖標:圓： .yuan{ width:100px; height:100px; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; background-color:red; } 橢圓 .oval {

圓：

.yuan{
? ? width:100px;
? ? height:100px;
? ? -moz-border-radius:50%;?
? ? -webkit-border-radius:50%;?
? ? border-radius:50%;?
? ? background-color:red;
}

css制作的圓，三角形，橢圓，箭頭圖標

橢圓

.oval {?
? ? width: 200px;?
? ? height: 100px;?
? ? background-color: red;?
? ? -moz-border-radius: 100px / 50px;?
? ? -webkit-border-radius: 100px / 50px;?
? ? border-radius: 100px / 50px;?
}

css制作的圓，三角形，橢圓，箭頭圖標

箭頭：

.arrow{
? ? content: '';
? ? position: absolute;
? ? width: 30px;
? ? height: 30px;
? ? border: 10px solid #f5b24a;
? ? -webkit-transform: rotate(-135deg);
? ? -moz-transform: rotate(-135deg);
? ? -o-transform: rotate(-135deg);
? ? -ms-transform: rotate(-135deg);
? ? transform: rotate(-135deg);
? ? border-top: none;
? ? border-right: none;
? ? top: 9px;
}

css制作的圓，三角形，橢圓，箭頭圖標

三角形：

.rencentle {
? ? width: 0;
? ? height: 0;
? ? border-left: 50px solid transparent;
? ? border-right: 50px solid transparent;
? ? border-bottom: 100px solid red;
}

css制作的圓，三角形，橢圓，箭頭圖標