当前位置:
首页 > 技术 > CSS3 实现带小三角形

CSS3 实现带小三角形

HTML代码:

<div class="arrow-up">
    <!--向上的三角-->
</div>

<div class="arrow-down">
    <!--向下的三角-->
</div>

<div class="arrow-left">
    <!--向左的三角-->
</div>

<div class="arrow-right">
    <!--向右的三角-->
</div>

下面用CSS3分别实现向上、下、左、右的三角形

/*箭头向上*/
.arrow-up {
    width:0;
    height:0;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    border-bottom:30px solid #fff;
}

/*箭头向下*/
.arrow-down {
    width:0;
    height:0;
    border-left:20px solid transparent;
    border-right:20px solid transparent;
    border-top:20px solid #0066cc;
}

/*箭头向左*/
.arrow-left {
    width:0;
    height:0;
    border-top:30px solid transparent;
    border-bottom:30px solid transparent;
    border-right:30px solid yellow;
}

/*箭头向右*/
.arrow-right {
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid green;
}

实例:

<div class="entry">
  <div class="entry-trangle"><!--本Div只来实现三角形,无其他作用--></div>
  hello,world<br/>
  hello,world<br/>
  hello,world<br/>
  hello,world<br/>
</div>
<style type="text/css">
    *{margin:0;padding:0;}
    body{
        background:#666;
        font:14px/20px "Microsoft YaHei";
    }
    .entry{
        margin:0 auto;
        margin-top:20px;
        width:280px;            
        background:#fff;
        padding:10px;
   
        /*设置圆角*/
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        border-radius:5px;
    }
    .entry-trangle{
        position:absolute;
        margin-left:-19px;
        width:0;
        height:0;
        border-top:10px solid transparent;
        border-bottom:10px solid transparent;
        border-right:10px solid #fff;
        z-index:-1;
    }
</style>

 

网友评论2

  1. 沙发
    bf598:

    守业真的很累很辛苦,经常城市让你精疲力尽,想放弃,吃不了苦的人千万不要取舍创业

    2016-09-25 3:22 PM

发表评论

您必须 [ 登录 ] 才能发表留言!