html+css顯示出三角形方法transparent

時間 2019-11-17

標籤 html+css html css 顯示三角形方法 transparent 欄目 CSS 简体版

原文原文鏈接

有時須要在頁面顯示三角形，須要經過畫正方形才能獲得三角形，代碼以下：前端

方法一：首先須要設置邊框的大小與顏色，設置邊框的上右下左分別你須要哪塊顯示在前端即後面跟數據，若是不須要顯示的話就寫transparent；spa

<style>

.tr1{

width: 0;

height: 0;

border: 100px solid transparent;

border-top-color: black;

border-bottom: none;

border-left-color: transparent;

border-right-color: transparent;

}

</style>

<body>

</body>

方法二：

<style>

　　.box{

　　　　width: 0px;

　　　　height: 0px;

　　　　/* background: blue; */

　　　　border-top: 20px solid rgba(0,0,0,0);

　　　　border-bottom: 20px solid black;

　　　　border-left:20px solid rgba(0,0,0,0);

　　　　border-right: 20px solid rgba(0,0,0,0);

　　　　}

</style>

<body>

</div>

</body>

相關標籤/搜索