CSS实现三角形效果
想要用css 实现三角形的效果,主要是通过border 属性
效果图:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS</title> <style> .div2{ width: 0; height: 0; border: 30px solid; border-color: pink transparent transparent transparent ; } </style> </head> <body> <div class="div2"></div> </body> </html>
通过改变 borde-color 属性,可以实现不同位置的三角形
原理: 先看一个通常情况下 border 的使用场景
代码:
<style> .div2{ width: 80px; height: 80px; border: 30px solid; border-color: pink pink pink pink ; } </style>
通过设置宽和高为0,改变 border-color 属性即可实现三角形效果