首页 >web前端 >html教程 >CSS3之创建透明边框三角_html/css_WEB-ITnose

CSS3之创建透明边框三角_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:22:56997浏览

简述

在前面,我们分享过关于三角的实现方式,主要根据border属性来设置,下面我们来实现上、下、左、右各种不同颜色的三角。

  • 简述
  • 实现
  • 效果
  • 源码
  • 实现

    效果

    源码

    <!DOCTYPE html><html><head><style type='text/css'>/* 上三角 */.arrow-up { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid green;}/* 下三角 */.arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid orange;}/* 右三角 */.arrow-right { width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid blue;}/* 左三角 */.arrow-left { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid silver;}</style></head><body>  <div class="arrow-up"></div>  <div class="arrow-down"></div>  <div class="arrow-left"></div>  <div class="arrow-right"></div></body></html>

    代码比较简单,我就不过多阐述了!

    声明:
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn