【前端小技巧】利用border画三角形及梯形
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画三角形及梯形的更多相关文章
- 利用Border画三角形
边框 1.边框其实并不是矩形,而是梯形 2.利用边框画三角形: div.a{ width:0px; height:0px; border:10px white solid; border-top-co ...
- CSS深入了解border:利用border画三角形等图形
三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了~! <!DOCTYPE html> <html la ...
- 用CSS的border画三角形
用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...
- css中border画三角形
<!doctype html><html lang="en"> <head> <meta charset="UTF-8&quo ...
- html border画三角形
最近遇到了问题就是画推进条类似于
- 前端小技巧:css sprite----V客学院技术分享
前端小技巧:css sprite 因为英文名叫sprite,翻译过来是精灵,而雪碧饮料也叫sprite,所以叫精灵兔或者雪碧图. 它有什么作用呢? 当用户在浏览器里输入一个URL地址的时候,你会感觉无 ...
- CSS中的一下小技巧1之CSS3三角形运用
使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...
- 利用border制作三角形原理
网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...
- 如何利用border书写三角形,建议考虑正方形
网页做三角形图片,你还在拿ps调整吗?out了,老铁,来和我一起脑海畅想一个正方形是由4个等腰直角三角形构成,然后我想保留上边的三角形,那下边.左边.右边的三角形就没了(设置背景色transparen ...
随机推荐
- 2020ICPC济南站 J.Tree Constructer
题目大意:给定一棵N个顶点的树,顶点为1~N,对于一个序列A1,A2,-,An,若Ai | Aj == 2^60-1,则会连一条边(i,j).要求求出一个序列,可以唯一确定所给定的树. 思路:考虑到树 ...
- AlertDialog的五种样式
建立DialogActivity.java文件: 1 public class DialogActivity extends AppCompatActivity { 2 private Button ...
- docker-docke安装和镜像仓库安装和管理
1.安装docker # yum install -y yum-utils device-mapper-persistent-data lvm2 # yum-config-manager \ --ad ...
- Vue中组件的递归
先来说下需求,就是一个表单,会有树形结构一样,会有子表单,表单显示什么内容是后台通过接口数据来确定的:这个时候就和树形结构一样,肯定会有子组件的递归:这次是自己第一次写递归,遇到了三个问题记录下: 1 ...
- Linux CentOS7.X-安装jdk
一.下载 jdk 的 tar 包 网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.h ...
- 怎么在linux上安装部署jenkins
怎么在linux上安装部署jenkins 作为一个非科班出身自学的小白,踩过很多的坑,特此留下记录 以下在虚拟机上示例 系统:linux(centos7) 操作方式:xshell连接终端操作 教程之前 ...
- Linux-系统启动与MBR扇区修复
目录 1.系统启动过程 1.1 MBR扇区 1.2 MBR扇区的备份与还原 1.3 修复MBR 1.3.1 dd备份MBR信息 1.3.2 光驱启动修复 1.4 grub引导代码修复 1.系统启动过程 ...
- 防止SQL 注入;如何进行防SQL 注入。
防止SQL 注入:1.开启配置文件中的magic_quotes_gpc 和magic_quotes_runtime 设置2.执行sql 语句时使用addslashes 进行sql 语句转换3.Sql ...
- CodeReview规范
目标和原则 提高代码质量,及早发现潜在缺陷,降低修改/弥补缺陷的成本 促进团队内部知识共享,提高团队整体水平 评审过程对于评审人员来说,也是一种思路重构的过程,帮助更多的人理解系统 是一个传递知识的手 ...
- Java学习笔记:02面向对象-重写_this_super_抽象类
02面向对象-重写/this/super/抽象类 ****1.this和super 作用: this: 区分本类的成员变量和局部变量同名情况 super:区分父类的成员变量和局部变量同名情况 用法: ...