【前端小技巧】利用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 ...
随机推荐
- java 执行shell命令遇到的坑
正常来说java调用shell命令就是用 String[] cmdAry = new String[]{"/bin/bash","-c",cmd} Runtim ...
- 走进第四范式:决策类AI企业的生存之道
根据不同的应用领域,人工智能行业可以分为视觉类人工智能.语音及语义类人工智能和决策类人工智能. 通常,我们接触的都是视觉类.语音类的人工智能,它们主要用来帮助人类执行具体任务,例如人脸识别,语音控制等 ...
- c# 去除TextBox的获取焦点事件
/// <summary> /// 去除TextBox的获取焦点事件 /// </summary> /// <param name="sender"& ...
- Python——模块&包&异常
模块&包&异常 一. 模块 Python 模块(Module),是一个 Python 文件,以 .py 结尾,包含了 Python 对象定义(变量)和Python语句. 模块能定义函数 ...
- 微信小程序授权获取手机号
wxml: <text>pages/logins/logins.wxml</text> // <button open-type="getPhoneNumber ...
- mysql保存emoji表情,utf8mb4保存不了表情的问题
报错信息 : Incorrect string value: '\xF0\x9F\x99\x85\xE2\x80...' for column 'content' at row 1 mysql数据库的 ...
- 写博客的技巧整理——基于Markdown
我们需要掌握各种技巧,这样才能在写博客时游刃有余,以下内容觉得不错就点个赞吧 文章目录 1.目录与目录跳转 目录一(示例用勿点) 目录二(示例用勿点) 目录三(示例用勿点) 2.文字与图片 3.引用 ...
- setState同步异步场景
setState同步异步场景 React通过this.state来访问state,通过this.setState()方法来更新state,当this.setState()方法被调用的时候,React会 ...
- Mybatis结果集ResultMap映射
基本使用: 解决属性名和数据库字段名不一致的问题 <resultMap id="user" type="com.guan.bean.UserBean"&g ...
- UC_OS II学习笔记
是一个可以基于ROM运行的.可裁减的.抢占式.实时.多任务OS内核: 可剥夺型的实时内核在任何时候都运行就绪了的最高优先级的任务. 一个任务,也称作一个线程,是一个简单的程序,该程序可以认为 CPU ...