zoukankan      html  css  js  c++  java
  • border-边框的形状

    一、简述

      浏览网页的时候,发现有些网页当中的箭头(三角形)是由border形成的,感到新奇。

    二、内容

      研究了一番后,首先普通的border用法是这样的

    <div style=" border-2px; border-color:#F44336; border-style:solid; 100px; height:100px; background-color:Black;">
    </div>

      如果把border-width放大10倍、border-color分别设置四个颜色,那么boder的四边就会各自变成不同颜色的梯形状

    <div style=" border-20px; border-color:#F44336 #2196F3 #009688 #FFEB3B; border-style:solid; 100px; height:100px; background-color:Black;">
    </div>

      然后把div的width与height都设置为0,那么border的四边就会各自变成不同颜色的三角形

    <div style=" border-20px; border-color:#F44336 #2196F3 #009688 #FFEB3B; border-style:solid; 0; height:0; background-color:Black;">
    </div>

      现在三角形(小箭头)已经出现了,接下来把上、右、下边还有background-color的颜色设置成transparent,就变成了一个三角形

    <div style=" border-20px; border-color:transparent transparent transparent #FFEB3B; border-style:solid; 0; height:0; background-color:transparent;">
    </div>

      又或者调整border四边的各自border-width,就会出现高度不一的三角形

    <div style=" border-20px 30px 40px 50px; border-color: #F44336 #2196F3 #009688 #FFEB3B; border-style:solid; 0; height:0; background-color:Black;">
    </div>

      最后利用这种技巧加absolute,就可以做出很巧妙的形状来替代一些简单的图片

  • 相关阅读:
    vuex入门
    element-UI快速上手例子运行失败
    Fix协议
    KDB+
    GO基础知识(基础数据类型之字符串、常量)
    如何实现一个通用的、高性能的排序函数
    线性排序(如何根据年龄给100万用户数据排序)
    【转】OpenResty 究竟解决了什么痛点
    idea项目常用的设置
    php站点ajax请求返回数据异常处理的经历
  • 原文地址:https://www.cnblogs.com/kongbailingluangan/p/6443268.html
Copyright © 2011-2022 走看看