css画一个三角形,梯形,平行四边形
生活随笔
收集整理的這篇文章主要介紹了
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設置透明就有了不同的三角形
<style>.main {display: flex;}.one {width: 0;height: 0;border: 10px solid transparent;border-left-color: red;}.two {width: 0;height: 0;border: 10px solid transparent;border-right-color: red;}.three {width: 0;height: 0;border: 10px solid transparent;border-top-color: red;}.four {width: 0;height: 0;border: 10px solid transparent;border-bottom-color: red;}</style> </head> <body><div class="main"> <div class="one"></div><div class="two"></div><div class="three"></div><div class="four"></div></div></body>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画一个三角形,梯形,平行四边形的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何打压不听话的刺头
- 下一篇： 20210406TestNG