利用css来制作小三角形样式

  • 利用css来制作小三角形样式已关闭评论
  • 8 次浏览
  • A+
所属分类:Web前端
摘要

1. 首先我们先准备一个盒子,让盒子的宽高等于零,分别给定四个方向的边框大小、实线、边框颜色;让边框来充当内容。

1. 首先我们先准备一个盒子,让盒子的宽高等于零,分别给定四个方向的边框大小、实线、边框颜色;让边框来充当内容。

 1 <!DOCTYPE html>  2 <html lang="en">  3    4 <head>  5     <meta charset="UTF-8">  6     <meta http-equiv="X-UA-Compatible" content="IE=edge">  7     <meta name="viewport" content="width=device-width, initial-scale=1.0">  8     <title>Document</title>  9     <style> 10         .box1 { 11             width: 0; 12             height: 0; 13             margin: 0 auto; 14             border-top: 100px solid palegreen; 15             border-right: 100px solid peru; 16             border-bottom: 100px solid purple; 17             border-left: 100px solid pink; 18         } 19     </style> 20 </head> 21   22 <body> 23     <div class="box1"></div> 24 </body> 25   26 </html>

 得到的是这样一个四个方向的三角形样式:

 

利用css来制作小三角形样式

2. 2. 截取需要哪个方向的三角形,就保留需要截取三角形的颜色,将其余方向的边框颜色设为透明色;

<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         .box2 {             width: 0;             height: 0;             margin: 0 auto;             /* 给定四个边框大小、实线、这里为了隐藏将边款颜色设置为透明色 */             border: 100px solid transparent;             /* 给需要留下的边框给定边框颜色,让其显示出来 */             border-top-color: palegreen;         }     </style> </head>   <body>     <div class="box2"></div> </body>   </html>

保留上边框的颜色,这样我们就能得到三角形样式了 :

 

利用css来制作小三角形样式

3. 总结

 如何利用css来制作简单的小三角形样式,原理就是利用控制边框的样式来实现三角形的样式。