Four triangles
effect:
style:
.angle {
margin : 100px auto;
width : 0;
height : 0;
border-top : 20px solid pink;
border-right : 20px solid red;
border-left : 20px solid blue;
border-bottom : 20px solid orange;
}
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin : 0;
padding : 0;
}
.angle {
margin : 100px auto;
width : 0;
height : 0;
border-top : 20px solid pink;
border-right : 20px solid red;
border-left : 20px solid blue;
border-bottom : 20px solid orange;
}
</style>
</head>
<body>
<div class="angle" ></div>
</body>
</html>
Left triangle
effect:
style:
.angle {
margin : 100px auto;
width : 0;
height : 0;
border : 20px solid transparent;
border-left : 20px solid red;
}
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin : 0;
padding : 0;
}
.angle {
margin : 100px auto;
width : 0;
height : 0;
border : 20px solid transparent;
border-left : 20px solid red;
}
</style>
</head>
<body>
<div class="angle" ></div>
</body>
</html>
Right triangle
effect:
style:
.angle {
margin : 100px auto;
width : 0;
height : 0;
border : 20px solid transparent;
border-right : 20px solid blue;
}
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin : 0;
padding : 0;
}
.angle {
margin : 100px auto;
width : 0;
height : 0;
border : 20px solid transparent;
border-right : 20px solid blue;
}
</style>
</head>
<body>
<div class="angle" ></div>
</body>
</html>
Upper triangle
effect:
style:
.angle {
margin : 100px auto;
width : 0;
height : 0;
border : 20px solid transparent;
border-top : 20px solid orange;
}
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin : 0;
padding : 0;
}
.angle {
margin : 100px auto;
width : 0;
height : 0;
border : 20px solid transparent;
border-top : 20px solid orange;
}
</style>
</head>
<body>
<div class="angle" ></div>
</body>
</html>
Lower triangle
effect:
style:
.angle {
margin : 100px auto;
width : 0;
height : 0;
border : 20px solid transparent;
border-bottom : 20px solid pink;
}
Code:
在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin : 0;
padding : 0;
}
.angle {
margin : 100px auto;
width : 0;
height : 0;
border : 20px solid transparent;
border-bottom : 20px solid pink;
}
</style>
</head>
<body>
<div class="angle" ></div>
</body>
</html>
note:
width:0 width is 0
height: 0 height is 0
Style the border