border是围绕元素内容和内边距的一条或多条线,border 属性允许你规定元素边框的样式、宽度和颜色

值:
border-width 粗细 none/hidden/solid/dashed/dotted
border-color 颜色 默认颜色是字体颜色
border-style 类型
可以综合写成:border:width color style 注意点:
边框是绘制在背景之上,因此。有些透明的背景会与边框重合。

总结:

1.设置一个边border有颜色,设置旁边两条边border颜色透明,不设置对边border,三角形指向无设置边的方向(如6,7情况)
2.设置一个边border有颜色,设置旁边1条边border颜色透明,其他两条边border不设置(如8情况,是在图7的情况之上去掉了上边)

【前端小技巧】利用border画三角形及梯形的更多相关文章

  1. 利用Border画三角形

    边框 1.边框其实并不是矩形,而是梯形 2.利用边框画三角形: div.a{ width:0px; height:0px; border:10px white solid; border-top-co ...

  2. CSS深入了解border:利用border画三角形等图形

    三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了~! <!DOCTYPE html> <html la ...

  3. 用CSS的border画三角形

    用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...

  4. css中border画三角形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  5. html border画三角形

    最近遇到了问题就是画推进条类似于

  6. 前端小技巧:css sprite----V客学院技术分享

    前端小技巧:css sprite 因为英文名叫sprite,翻译过来是精灵,而雪碧饮料也叫sprite,所以叫精灵兔或者雪碧图. 它有什么作用呢? 当用户在浏览器里输入一个URL地址的时候,你会感觉无 ...

  7. CSS中的一下小技巧1之CSS3三角形运用

    使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...

  8. 利用border制作三角形原理

    网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...

  9. 如何利用border书写三角形,建议考虑正方形

    网页做三角形图片,你还在拿ps调整吗?out了,老铁,来和我一起脑海畅想一个正方形是由4个等腰直角三角形构成,然后我想保留上边的三角形,那下边.左边.右边的三角形就没了(设置背景色transparen ...

随机推荐

  1. 2020ICPC济南站 J.Tree Constructer

    题目大意:给定一棵N个顶点的树,顶点为1~N,对于一个序列A1,A2,-,An,若Ai | Aj == 2^60-1,则会连一条边(i,j).要求求出一个序列,可以唯一确定所给定的树. 思路:考虑到树 ...

  2. AlertDialog的五种样式

    建立DialogActivity.java文件: 1 public class DialogActivity extends AppCompatActivity { 2 private Button ...

  3. docker-docke安装和镜像仓库安装和管理

    1.安装docker # yum install -y yum-utils device-mapper-persistent-data lvm2 # yum-config-manager \ --ad ...

  4. Vue中组件的递归

    先来说下需求,就是一个表单,会有树形结构一样,会有子表单,表单显示什么内容是后台通过接口数据来确定的:这个时候就和树形结构一样,肯定会有子组件的递归:这次是自己第一次写递归,遇到了三个问题记录下: 1 ...

  5. Linux CentOS7.X-安装jdk

    一.下载 jdk 的 tar 包 网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.h ...

  6. 怎么在linux上安装部署jenkins

    怎么在linux上安装部署jenkins 作为一个非科班出身自学的小白,踩过很多的坑,特此留下记录 以下在虚拟机上示例 系统:linux(centos7) 操作方式:xshell连接终端操作 教程之前 ...

  7. Linux-系统启动与MBR扇区修复

    目录 1.系统启动过程 1.1 MBR扇区 1.2 MBR扇区的备份与还原 1.3 修复MBR 1.3.1 dd备份MBR信息 1.3.2 光驱启动修复 1.4 grub引导代码修复 1.系统启动过程 ...

  8. 防止SQL 注入;如何进行防SQL 注入。

    防止SQL 注入:1.开启配置文件中的magic_quotes_gpc 和magic_quotes_runtime 设置2.执行sql 语句时使用addslashes 进行sql 语句转换3.Sql ...

  9. CodeReview规范

    目标和原则 提高代码质量,及早发现潜在缺陷,降低修改/弥补缺陷的成本 促进团队内部知识共享,提高团队整体水平 评审过程对于评审人员来说,也是一种思路重构的过程,帮助更多的人理解系统 是一个传递知识的手 ...

  10. Java学习笔记:02面向对象-重写_this_super_抽象类

    02面向对象-重写/this/super/抽象类 ****1.this和super 作用: this: 区分本类的成员变量和局部变量同名情况 super:区分父类的成员变量和局部变量同名情况 用法: ...