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

最新推荐文章于 2024-06-25 15:10:09 发布

c-Tomorrow

最新推荐文章于 2024-06-25 15:10:09 发布

阅读量5.4k

点赞数 15

CC 4.0 BY-SA版权

分类专栏： css、css3 文章标签： transparent transparent实现小箭头

本文链接：https://blog.youkuaiyun.com/c__dreamer/article/details/80469884

css、css3 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何使用CSS中的transparent属性来实现不同形状的绘制，包括基本的箭头形状及通过调整宽高和圆角生成更多复杂形状的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}