溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下如何用css繪制三角形和箭頭的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
先看一下下面的代碼：
<div class="box1"></div>
<br />
<div class="box2"></div>
<style>
.box1{width:0px;height:0px;border:50px solid red;}
.box2{width:0px;height:0px;border-width:50px;border-style:solid;border-color:red green blue yellow;}
</style>效果：
在上面的效果中，我們看到了四個三角形，如何得到一個三角形呢？如果其中三個三角形透明，剩余一個三角形。css代碼如下：
.box2{width:0;height:0;border-width:20px;border-style:solid;border-color:red transparent transparent transparent;}效果：
以上就得到了一個三角形，想想其他方向的三角形如何得到呢？ 箭頭呢？下面附上代碼
.arrow{width:50px;height:50px;border-width:2px;border-style:solid;border-color:red red transparent transparent;transform:rotate(45deg);}以上就是“如何用css繪制三角形和箭頭”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
