CSS三角形背景是一种常见的设计元素,它可以让网站更加生动、美观。下面我们来介绍一些实现方法。/* 1. 用border实现三角形 */ .triangle { width: 0; height: 0
CSS三角形背景是一种常见的设计元素,它可以让网站更加生动、美观。下面我们来介绍一些实现方法。
/* 1. 用border实现三角形 */ .triangle { width: 0; height: 0; border-top: 50px solid #f00; border-right: 50px solid transparent; } /* 2. 用伪元素实现三角形 */ .triangle::before { content: ""; width: 0; height: 0; border-top: 50px solid #0f0; border-right: 50px solid transparent; display: block; } /* 3. 用transform实现三角形 */ .triangle { width: 100px; height: 100px; background-color: #00f; transform: rotate(45deg); } /* 4. 用clip-path实现三角形 */ .triangle { width: 100px; height: 100px; background-color: #f0f; clip-path: polygon(50% 0, 0 100%, 100% 100%); } /* 5. 用SVG实现三角形 */ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path fill="#ff0" d="M 0,0 L 50,100 L 100,0 Z" /> </svg>
以上是五种常见的实现方法,可以根据具体情况选择合适的方法来实现。
粉丝
0
关注
0
收藏
0