了解transparent,用transparent透明实现箭头绘制

transparent：指定透明度（版本更新：background属性->border属性->任何带有color的属性）

transparent

用来指定全透明色彩，想当于rgba（0,0,0,0）。

background-color的默认值。

CSS3可以应用于所有带颜色设置的属性。

transparent就是指定透明，要了解transparent绘制箭头就要了解border形成原理

border形成原理

四个边框以斜角的形式在盒子的周围。

当盒子宽高为0的时候，四边以三角形的形式进行相接。

如果说只有一个边框宽度存在的时候，并且盒子没有高度，则这个边框不会显示，所以必须有两个边框宽度存在并且边框相邻，才会显示。

.div1{width:0px;height:0px;background-color:transparent;margin:auto;border:30px solid red;border-color:red green blue yellow;/*上*/border-color:red transparent transparent transparent;/*右*/border-color:transparent red transparent transparent;/*下*/border-color:transparent transparent red transparent;/*左*/border-color:transparent transparent transparent red;
}

使用transparent实现四角小箭头

.div3{width:0;height:0;background-color:transparent;margin:10px auto;border:30px solid transparent;border-width:30px 30px 0 0;/*左上*/border-color:green transparent;/*右下*/border-color:transparent green;border-width:0 30px 30px 0;/*左下*/border-color:green transparent;/*右上*/border-color:transparent green;
}

加上宽高和圆角的话还可以变换成其他各种各样的形状

.div4{width:50px;height:50px;background-color:transparent;margin:10px auto;border:100px solid transparent;border-top-color:red;border-radius:600px;
}

真正明白transparent实现透明的原理才能做出各种各样的形状。

--主页传送门--

了解transparent,用transparent透明实现箭头绘制相关推荐

CSS 了解transparent,用transparent透明实现箭头绘制
transparent 是透明色,是系统默认的颜色箭头绘制主要利用一个空元素,设置其边框为transparent,然后利用边框不同顶部的颜色达到显示箭头的目的 .banner { width: 0p ...
C#完美实现透明窗体的绘制效果
为了实现透明窗体的绘制,最开始是采用了双层窗体的模式. 思路:将form1的属性transparencyKey设置为背景色,将form2的opicaty设置的很低,比如0.05,保证鼠标不会穿透!让后 ...
CAD中怎么画带有箭头的圆弧？弧形CAD箭头绘制步骤
在CAD设计过程中,如果想要画两头带箭头的圆弧该如何操作呢?本节CAD教程小编就来给大家分享一下可以画弧形CAD箭头的小插件,有需要的小伙伴可以一起来了解一下哦! 弧形CAD箭头绘制步骤: 1.启动浩 ...
Oracle 11g 新特性 -- Transparent Data Encryption (透明数据加密TDE) 增强说明
一.TransparentData Encryption (TDE:透明数据加密) 说明 Orace TDE 是Orcle 10R2中的一个新特性,其可以用来加密数据文件里的数据,保护从操作系统层面上 ...
css transparent属性_css 透明颜色transparent的使用
在css中 transparent到底是什么意思呢? transparent 它代表着全透明黑色,即一个类似rgba(0,0,0,0)这样的值. 例如在css属性中定义:background:tran ...
解决 IOS 显示 transparent 展示黑色透明
IOS 展示 transparent 会变成一个黑色透明的情况,Android展示就没有问题,蜜汁困惑然后,大概的百度了下原因平台支持 Android - 2.2+ (支持): Android平台 ...
MATLAB箭头绘制 arrow3 函数与 quiver3 函数的实用教程
MATLAB 的 arrow3 函数可以方便地在 figure 窗口中绘制箭头,效率也还可以,这里简单介绍其基本使用方法以便读者参考.对于一般的使用场景而言arrow3的使用十分简单方便.但是,arr ...
CAD线宽设置及箭头绘制、房屋文字大小与陡坎显示问题
1. CAD设置了线宽但是显示不出来_百度经验 https://jingyan.baidu.com/article/b0b63dbf3a222a4a49307040.html 2. 怎样在CAD中插 ...
【赏】svg添加箭头绘制路径运动
svg绘制的一个路径如何加上一个箭头也沿着这个路径运动要在SVG路径中添加箭头,你可以使用marker-end属性.它可以为路径的末端添加一个标记,通常是一个箭头. 以下是修改您的代码来添加箭头 ...

了解transparent,用transparent透明实现箭头绘制

transparent

border形成原理

了解transparent,用transparent透明实现箭头绘制相关推荐

最新文章

热门文章