css左上角上三角形
时间: 2024-03-12 22:41:44 浏览: 138
详解CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式
CSS左上角上三角形可以通过CSS的border属性和transform属性来实现。以下是一种实现方式:
```css
.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #000;
border-left: 50px solid #000;
transform: rotate(-45deg);
}
```
这段CSS代码创建了一个宽高为0的元素,并设置了四个边框,其中上、右边框设置为透明,下、左边框设置为实心的颜色。通过transform属性的rotate函数将元素旋转了-45度,从而形成了一个左上角朝上的三角形。
阅读全文