CSS画等腰三角形与直角三角形

比眉伴天荒 2021-11-02 05:18 592阅读 0赞

## 代码 ##

<html>
    	<head>
    		<meta charset="utf-8">
    		<style> .triangle{ width: 0; height: 0; border: 50px solid transparent; border-top-color: red; /* 要显示的边的对边可以没有高度，但是左右两边因为要撑开三角形的宽度，所以要有 */ /* border-bottom-width: 0; */ /* 直角三角形 原理为只由右边的宽度撑开三角形 */ /*border-left-width: 0;*/ } </style>
    	</head>
    	<body>
    		<div class="triangle"></div>	
    	</body>
    </html>

## 效果 ##

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

## 原理 ##

原理其实很简单，利用border的特性，将块级元素的宽高设为0，通过控制边界的大小来控制三角形的大小，然后将其他三边设置为透明即可。如果不设置透明，是这样的（为了更好的看清楚，将四个边界设为不同的颜色）：

border-top-color: red;
    	border-left-color: blue;
    	border-bottom-color: green;
    	border-right-color: yellow;

![在这里插入图片描述][20190810103147409.png]  
将其他边设为透明即可得到一个等腰三角形。

## 直角三角形 ##

首先得明白原理，因为将宽高设置为0，所以整个块级元素的宽高由边界来决定，如果只有上边界有宽度，即块级元素的横向没有宽度，此时什么都没有，但是如果此时右边界也有宽度（其实只要左边界为0即可），那么上边界和右边界就会将整个div给撑开，就会有如下效果：  
![在这里插入图片描述][20190810103624703.png]

[20190810102847102.png]: /images/20211102/5fb859affde54a448de3dfbf85dd5b99.png
[20190810103147409.png]: /images/20211102/1bc9f37a9ad7468b84f0bfd3abbdc391.png
[20190810103624703.png]: /images/20211102/96dcb9f93d8643ba9d861b4b1550f0f6.png