cvmachine.com - 申博开户网

搜索: 您的位置主页 > 网络频道 > 阅读资讯:如何通过CSS3使用border写空心三角箭头?

如何通过CSS3使用border写空心三角箭头?

2017-11-14 13:03:46 来源:www.cvmachine.com 【

如何通过CSS3使用border写空心三角箭头?

之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~

第一种写法 利用常见的 after伪元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      .arrow {
        width: 20px;
        height: 4px;
        margin: 0 auto 7px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid #343c99;
        transform: rotate(45deg);
        transform-origin: left;
      }
      
      .arrow:after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #343c99;
        position: absolute;
        right: -10px;
        top: -14px;
        transform: rotate(90deg);
        transform-origin: bottom;
      }
    </style>
  </head>
  <body>
    <div class="arrow"></div>
  </body>
</html>

第二种写法相对于比较简单

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      /*简单*/
      .wb_arrow{
        border-right: 2px solid #343c99;
        border-top: 2px solid #343c99;
        height: 10px;
        width: 10px;
        margin:50px auto 0;
        transform: rotate(deg);
        -webkit-transform: rotate(0deg);
        /*不加这两个属性三角会比上一个略丑, 大家可以试一下*/
        border-left: 2px solid transparent;
        border-bottom: 2px solid transparent;
      }
    </style>
  </head>
  <body>
    <div class="wb_arrow"></div>
  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持申博开户。


本文地址:http://www.cvmachine.com/a/question/93775.html
Tags: css3 详解 border
编辑:申博开户网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部
m88.com m88 vwin 188bet uedbet 威廉希尔 vwin 明升 bwin 明升88 bodog bwin 明升m88.com m88 18luck 188bet 博狗 澳门金沙 澳门彩票 unibet unibet Ladbrokes Ladbrokes 12bet 真钱的棋牌游戏 皇冠娱乐 casino casino m88明升 明升88 明升 明升 明升 明升 m88.com m88.com