CSS实现三角效果的简单实例
时间:12月13日

方法一:使用border来设置边框,元素有高度和宽度

XML/HTML Code复制内容到剪贴板
  1. <i class="triangle"></i>    
  2.      
  3. .triangle {    
  4.      transform: rotate(45deg);    
  5.      display: block;    
  6.      width: 12px;    
  7.      height: 12px;    
  8.      border: 1px solid #9e9e9e;    
  9.      border-top-color: transparent;    
  10.      border-right-color: transparent;    
  11.      background-color: #fff;    
  12. }    

效果:

利用transform属性可以旋转三角形,达到想要的效果。

 

方法二:利用border来撑起来三角形

XML/HTML Code复制内容到剪贴板
  1. <i class="triangle"></i>    
  2.      
  3. .triangle {    
  4.      display: block;    
  5.      position: absolute;    
  6.      width: 0;    
  7.      border-width: 6px;    
  8.      border-color: transparent transparent red;    
  9.      border-style: dashed dashed solid;    
  10.      top: -12px;    
  11.      right: 76px;    
  12. }    

效果:

 

应用场景:点击234或者点击选中的时候三角形指向对应的选项

 

小贴士:

    1、学会经常使用伪元素例如after或者before来实现三角形

    2、两种方法的区别:第二种方法设置的三角形背景色和边框的颜色相同;第一种方法设置的三角形背景色和边框的颜色可以不相同;需要根据不同应用场景效果来选择方法。

第二种方法也可以通过使用两个颜色不同的三角形覆盖来实现背景色和边框色不同的效果。

以上这篇CSS实现三角效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持诺心网络。

最新动态
大家感兴趣的内容
关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿
严禁网站镜像,否则追究法律责任 CopyRight © 2015-2018 诺心网络 All Rights Reserved.
地址:杭州拱墅区祥园路38号浙报理想祥园创意园东区A319
电话:18958065710 微信:Evtailun 邮箱:476565345@qq.com
浙ICP备15017827号-1