小編給大家分享一下css如何使用border繪制三角形，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創新互聯建站專注于中大型企業的成都做網站、成都網站建設、成都外貿網站建設和網站改版、網站營銷服務，追求商業策劃與數據分析、創意藝術與技術開發的融合，累計客戶上千多家，服務滿意度達97%。幫助廣大客戶順利對接上互聯網浪潮，準確優選出符合自己需要的互聯網運用，我們將一直專注成都品牌網站建設和互聯網程序開發，在前進的路上，與客戶一起成長！

使用 border 繪制三角形

使用 border 實現三角形應該是大部分人都掌握的，也是各種面經中經常出現的，利用了高寬為零的容器及透明的 border 實現。

<div class='top'></div>
<div class='bottom'></div>
<div class='left'></div>
<div class='right'></div>

html, body {
  width: 100%;
  height: 100%;
  display: flex;
}

div {
  width: 0px;
  height: 0px;
  margin: auto;
}
.top {
  border: 50px solid transparent;
  border-bottom: 50px solid deeppink;
}

.left {
  border: 50px solid transparent;
  border-right: 50px solid deeppink;
}

.bottom {
  border: 50px solid transparent;
  border-top: 50px solid deeppink;
}

.right {
  border: 50px solid transparent;
  border-bottom: 50px solid deeppink;
}

以上是“css如何使用border繪制三角形”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！

本文標題：css如何使用border繪制三角形
網頁路徑：http://www.2m8n56k.cn/article10/pchjgo.html

成都網站建設公司_創新互聯，為您提供動態網站、網站設計、App設計、網站維護、用戶體驗、品牌網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯