當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css画一个三角形,梯形,平行四边形

發布時間：2024/1/18 编程问答 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 css画一个三角形,梯形,平行四边形小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一使用css簡單的畫一個三角形

1. 先來看看border的劃分

.demo{width:100px;height:100px;border:3px red solid;}

2. 當盒子的寬度為0會是什么樣子呢

.demo{width:0;height:0;border: 40px solid;border-color: red blue red blue; }

3. 利用transparent設置透明就有了不同的三角形

4. 一個邊設置為0得到一個直角三角形

.one {width: 0;height: 0;border: 50px solid transparent;border-left-color: red;border-top: 0;}

二來畫個梯形

按照畫三角形的原理,根據條件設一個寬或者高

width: 200px;height:0;border: 50px solid transparent;border-bottom-color: red;

三畫個平行四邊形

主要利用css3的transform: skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉換。

.city {padding: 5px 20px;border: 1px solid #44a5fc;color: #333;transform: skew(-20deg);}<div class="city">武漢</div>

四畫個鈍角三角形

主要利用css3的**transform: skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉換。**畫鈍角三角形

.city {width: 0;height: 0;border:30px solid transparent;border-bottom-color:#44a5fc;border-right-color:#44a5fc;transform: skew(-30deg);}<div class="city"></div>

總結

以上是生活随笔為你收集整理的css画一个三角形,梯形,平行四边形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。