1. Transparent border style
If the border has no style, there is no width.
However, in this case, an invisible border can be created.
CSS2 introduced
transparent
that have created value for the width of the invisible border.
border-top-color: transparent;
2. Draw a triangle with CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 0px;
height: 0px;
border: 100px solid red;
border-color: red transparent transparent transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
The effect is as follows
The order of CSS box borders is: up→right→down→left
Reference:
w3c: CSS border transparency