巧妙用css border属性实现规则图形

首先:一个例子:

#div1 {

    height:20px;

    width:20px;

    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;

    border-style:solid;

    border-width:20px;

}

此代码的效果图为:

中间白色为宽高各为20px的div1。

那么问题来了,要实现三角号,只需将div宽高设置为0,然后只设置一边的border显示即可

代码如下:

#div2 {

    height:0;

    width:0;

    overflow: hidden;

    border:20px dashed transparent;

    border-top:20px solid #FF9600;

}


问题:这样设置整个div的宽高是40*40;如果不想要多余占位,可设置border-width:20px 20px 0; border-style:solid; border-color:#ff9600 transparent transparent;( 等同于只设border-top-color:#ff9600;)



其次:再一个例子:

跟上面类似,width:0; height:0;border:20px dashed transparent; border-color:green red green red; border-width:0 20px 20px 20px;

样式如下:


如果有两边border-width:0;

样式如下:



做翻页效果时修改border-width值即可实现。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

啦啦噜啦啦

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者