CSS: 用CSS实现一个三角形
Opened this issue · 0 comments
leslie1943 commented
三角形基本思路
width
和height
都为0px
- 分别设置容器的border,其中任意三个border的可见度为0即可
.box {
width: 0px;
height: 0px;
border-top: 20px solid rgba(48, 31, 141, 0);
border-right: 20px solid rgba(29, 114, 117, 1);
border-bottom: 20px solid rgba(170, 22, 136, 0);
border-left: 20px solid rgba(144, 175, 29, 1);
}
```
### demo
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.box {
margin: 0 auto;
width: 0px;
height: 0px;
border-top: 20px solid rgba(48, 31, 141, 0);
border-right: 20px solid rgba(29, 114, 117, 1);
border-bottom: 20px solid rgba(170, 22, 136, 0);
border-left: 20px solid rgba(144, 175, 29, 1);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
```