溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css怎么制作一個三角形”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css怎么制作一個三角形”吧！
在很多頁面制作中會設計到突出一個三角，下面給出一種兼容各種瀏覽器的設計方法：
XML/HTML Code復制內容到剪貼板
<!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>
主要注意幾點：
1. font-size:0; 作用是兼容IE，否則IE會出現梯形，或者line-height:0;也行
2.為了提升可擴展行，設置邊框顏色透明，但是IE中transparent會有灰色，兼容辦法就是設置相應的邊框樣式為dashed；
3.在項目中一般會選擇用絕對定位將三角定位到相應位置，但是有時候選用倒三角是也能不用，后果就是容器里多處一塊高度，辦法就是容器設置高度，然后overflow：hidden；（三角設計原理可知）
感謝各位的閱讀，以上就是“css怎么制作一個三角形”的內容了，經過本文的學習后，相信大家對css怎么制作一個三角形這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
