CSS画图

迷南。 2023-07-09 09:30 8阅读 0赞

# 一. 梯形 #

## 1.1 画一个正方形（边长100px）边框，边框宽度为10px ##

width: 100px;
    height: 100px;
    border: 10px solid red;

效果图：  
![在这里插入图片描述][20200228160922597.png]  
这里的border平均分配如下图所示：  
![在这里插入图片描述][20200228161252586.png]

## 1.2 画出梯形 ##

## 1.2.1 思路一 ##

将其余三条边隐藏即可

简洁写法
    			width: 100px;
    			height: 100px;
    			border: 10px solid transparent;
    			border-top-color: red;

节省空间写法  ！！！不写bottom！！！  推荐
    			width: 100px;
    			height: 100px;
    			border-top: 10px solid red;
    			border-left: 10px solid transparent;
    			border-right: 10px solid transparent;

![在这里插入图片描述][20200228161759262.png]

## 1.2.2 思路二 ##

width: 100px;
    			height: 0;
    			border-top: 100px solid red;
    			border-right: 40px solid transparent;

倒直角梯形

![在这里插入图片描述][20200228164958626.png]

# 二. 三角形 #

根据梯形的原理，把width设置为0即可

\*\*设置不同三角形的原理：\*\*border 设置的都是三角形的高，对于下图而言border-top是三角形的高 border-left和border-right组成三角形的底边 根据三角形的底边与高的长度，这样就可以随意设置  
![在这里插入图片描述][20200228163238492.png]

## 2.1 等腰直角三角形 ##

width: 0;
    			width: 0;
    			border-top: 100px solid red;
    			border-left: 100px solid transparent;
    			border-right: 100px solid transparent;

![在这里插入图片描述][20200228162441877.png]![在这里插入图片描述][20200228155939755.png]

## 2.2 等边三角形 ##

width: 0;
    			width: 0;
    			border-top: 173px solid red;
    			border-left: 100px solid transparent;
    			border-right: 100px solid transparent;

![在这里插入图片描述][2020022816363160.png]

## 2.3 底边和高相同的等腰三角形 ##

如下图所示![在这里插入图片描述][20200228163731597.png]

width: 0;
    			width: 0;
    			border-top: 200px solid red;
    			border-left: 100px solid transparent;
    			border-right: 100px solid transparent;

![在这里插入图片描述][20200228163901807.png]

# 三. 平行四边形 #

width: 150px;
    		    height: 100px;
    		    margin-left: 100px;
    		    transform: skew(-30deg);
    		    background: #000;

平行四边形的高是100px  
![在这里插入图片描述][20200228164356684.png]

[20200228160922597.png]: https://img-blog.csdnimg.cn/20200228160922597.png
[20200228161252586.png]: https://img-blog.csdnimg.cn/20200228161252586.png
[20200228161759262.png]: https://img-blog.csdnimg.cn/20200228161759262.png
[20200228164958626.png]: https://img-blog.csdnimg.cn/20200228164958626.png
[20200228163238492.png]: https://img-blog.csdnimg.cn/20200228163238492.png
[20200228162441877.png]: https://img-blog.csdnimg.cn/20200228162441877.png
[20200228155939755.png]: https://img-blog.csdnimg.cn/20200228155939755.png
[2020022816363160.png]: https://img-blog.csdnimg.cn/2020022816363160.png
[20200228163731597.png]: https://img-blog.csdnimg.cn/20200228163731597.png
[20200228163901807.png]: https://img-blog.csdnimg.cn/20200228163901807.png
[20200228164356684.png]: https://img-blog.csdnimg.cn/20200228164356684.png