您好,登錄后才能下訂單哦!
這篇文章主要講解了“css怎么制作一個(gè)三角形”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“css怎么制作一個(gè)三角形”吧!
在很多頁(yè)面制作中會(huì)設(shè)計(jì)到突出一個(gè)三角,下面給出一種兼容各種瀏覽器的設(shè)計(jì)方法:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.corner-top{
width:0px;
height:0px;
font-size:0;
border-width:20px;
border-style:solid dashed dashed dashed;
border-color:#e66161 transparent transparent transparent;
}
.corner-bottom{
width:0px;
height:0px;
font-size:0;
border-width:20px;
border-style:dashed dashed solid dashed;
border-color:transparent transparent #94e24f transparent;
}
.corner-left{
width:0px;
height:0px;
font-size:0;
border-width:20px;
border-style:dashed dashed dashed solid;
border-color:transparent transparent transparent #85bfda;
}
.corner-right{
width:0px;
height:0px;
font-size:0;
border-width:20px;
border-style:dashed solid dashed dashed;
border-color:transparent #f3bb5b transparent transparent;
}
</style>
</head>
<body>
<div class="corner-top"></div>
</br>
<div class="corner-bottom"> </div>
</br>
<div class="corner-left"> </div>
</br>
<div class="corner-right"> </div>
</body>
</html>
主要注意幾點(diǎn):
1. font-size:0; 作用是兼容IE,否則IE會(huì)出現(xiàn)梯形,或者line-height:0;也行
2.為了提升可擴(kuò)展行,設(shè)置邊框顏色透明,但是IE中transparent會(huì)有灰色,兼容辦法就是設(shè)置相應(yīng)的邊框樣式為dashed;
3.在項(xiàng)目中一般會(huì)選擇用絕對(duì)定位將三角定位到相應(yīng)位置,但是有時(shí)候選用倒三角是也能不用,后果就是容器里多處一塊高度,辦法就是容器設(shè)置高度,然后overflow:hidden;(三角設(shè)計(jì)原理可知)
感謝各位的閱讀,以上就是“css怎么制作一個(gè)三角形”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)css怎么制作一個(gè)三角形這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。