CSS to achieve triangle (up and down, left and right) @莫成尘

Look at the code first, just copy and use, the following code can be copied and pasted to use (I will explain the code in the form of comments, you will see the following effects).

If you are satisfied, please give Mo Chengchen a Fabulous

css draw triangle

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.div1 {
    
    
		    width: 0px;
		    height: 0px;
		    border: 50px solid; /* border的宽度决定了三角形的大小 */
			border-color: transparent; /* 设置border为透明 */
		    border-top-color: red; /* 仅设置上方border显示 其他类似 */
		}
		.div2 {
    
    
		    width: 0px;
		    height: 0px;
		    border: 50px solid;
			border-color: transparent;
		    border-right-color: red;
		}
		.div3 {
    
    
		    width: 0px;
		    height: 0px;
		    border: 50px solid;
			border-color: transparent;
		    border-bottom-color: red;
		}
		.div4 {
    
    
		    width: 0px;
		    height: 0px;
		    border: 50px solid;
			border-color: transparent;
		    border-left-color: red;
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
	<div class="div4"></div>
</body>
</html>

Additional and useful information that may appear has been annotated

Guess you like

Origin blog.csdn.net/weixin_47821281/article/details/110950107