方式一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> span { display: block; width: 0; /* 高度默认为0，可以不设置，宽度默认为父元素的高度，需要设置 */ border-top: 50px solid #000; border-bottom: 50px solid #fff; border-left: 50px solid #fff; border-right: 50px solid #fff; } </style> </head> <body> <span></span> </body> </html>
方式二：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 0; border-left:50px solid transparent ; border-right:50px solid transparent ; border-top: 50px solid #000; } </style> </head> <body> <div></div> </body> </html>
方式三：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 0; border: 50px solid #fff; border-left-color: #000; } </style> </head> <body> <div></div> </body> </html>