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

代码

<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>

效果

CSS画等腰三角形与直角三角形_第1张图片

原理

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

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

CSS画等腰三角形与直角三角形_第2张图片
将其他边设为透明即可得到一个等腰三角形。

直角三角形

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

你可能感兴趣的:(前端工程师)