纯css画三角形

最新推荐文章于 2022-08-05 21:20:29 发布

xiaoxiao无脸男

最新推荐文章于 2022-08-05 21:20:29 发布

阅读量734

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/xiaoxiaoluckylucky/article/details/80940242

版权

CSS 专栏收录该内容

6 篇文章

订阅专栏

思路：用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 
  >Document 
  </ 
  title 
  > 
 
 
  < 
  style 
  > 
 
 
  .triggle { 
 
 
  width: 
  0; 
 
 
  height: 
  0; 
 
 
  border: 
  100px 
  solid 
  transparent; 
 
 
  border-left: 
  100px 
  solid 
  red; 
 

   } 
 
 
  < 
  / 
  style 
  > 
 
 
  </ 
  head 
  > 
 

 
  < 
  body 
  > 
 
 
  < 
  div 
  class= 
  "triggle" 
  ></ 
  div 
  > 
 
 
  </ 
  body 
  > 
 

 
  </ 
  html 
  > 
 

100是三角形的高，效果如下：三角形底边长200高100

相应的，若是倒三角形，则设置border:100px solid transparent;border-top:100px solid red;即可.

画一个左下角的正三角形，代码如下：

 
  <!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 
  >Document 
  </ 
  title 
  > 
 
 
  < 
  style 
  > 
 
 
  .triggle { 
 
 
  width: 
  0; 
 
 
  height: 
  0; 
 
 
  border: 
  100px 
  solid 
  transparent; 
 
 
  border-left: 
  100px 
  solid 
  red; 
 
 
  border-bottom: 
  100px 
  solid 
  red; 
 

   } 
 
 
  < 
  / 
  style 
  > 
 
 
  </ 
  head 
  > 
 

 
  < 
  body 
  > 
 
 
  < 
  div 
  class= 
  "triggle" 
  ></ 
  div 
  > 
 
 
  </ 
  body 
  > 
 

 
  </ 
  html 
  > 
 

效果图：