【前端小技巧】利用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 ...
随机推荐
- 哈工大 计算机系统 大作业 程序人生-Hello’s P2P
计算机系统 大作业 题 目 程序人生-Hello's P2P 专 业 计算机 学 号 班 级 学 生 指 导 教 师 计算机科学与技术学院 2021年6月 摘 要 本文主要通过分析hello这个程序的 ...
- WPF优秀组件推荐之FreeSpire
概述 Spire是一套可以轻松处理Word.Excel和PDF的商业组件,需要收费,但是他有一套对应的免费组件FreeSpire可以使用,免费组件在功能上有一些限制(比如:excel的sheet数量不 ...
- java 注释与标识符
JAVA基础 注释与标识符 注释 书写注释是一个非常好的习惯 三种注释: 单行,多行,文档 .单行 ://注释 .多行:/* 注释 / .文档** 注释 */ 标识符 1. 关键字 2.标识符注意点 ...
- Java编程学习笔记(基础篇)
一.Java中的数据类型 1.基本数据类型:四类 八种 byte(1) boolean(1) short(2) char(2) int(4) float(4) long(8) double(8) 2. ...
- huawei 华为 ubuntu mysql 访问不了的原因
标签:服务器 ins 查看 tar 安全组 service 一. 首先将3306端口添加至安全组, 确保端口没有被封掉 二. 开启服务器上的mysql 权限, 步骤如下 1.mys ...
- instanceOf与父子类型转换
instanceOf 只要有父子类关系,sout(A instanceOf B)结果就位ture,反之false 先前定义 class Person ; method calss Father ; m ...
- python中判断为None
python中经常会有判断一个变量是否为None的情况,这里列举三种方式: if not x if x is None if not x is None *********************** ...
- 74CMS 3.0 SQL注入漏洞后台
代码审计工具:seay CMS:74CMS3.0 一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1.双击启动桌面Seay源代码审计系统软 ...
- Cobalt Strike之LINK木马
在同一目录下 新建一个exp.ps1 一个test.txt exp.ps1代码 $file = Get-Content "test.txt" $WshShell = New-Obj ...
- 加速度传感器(MPA1064A)实测---LOTO虚拟示波器
加速度传感器(MPA1064A)实测---LOTO虚拟示波器 客户提供了一个加速度传感器,型号是MPA1064A,我们帮助客户测试下是否能测到传感器的输出,验证下测试方案.传感器很小巧,带了一根很长的 ...