css如何实现特殊标志或图形 css实现特殊标志或图形代码

css如何实现特殊标志或图形？本篇文章小编给大家分享一下css实现特殊标志或图形代码，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

前言

由于图片占的空间比较大，且图片越多，越不好管理，所以有些时候，我们可以使用一些简单的标签样式来实现简单的图形标志来替代图片。

实例展示：

三角形示例

示例代码：

方向箭头示例

示例代码：

空缺圆

 	*{
		padding:0;
		margin:0;
	}

	div:before{
		content:"";
		
		
		position:absolute;
		top:-10px;
		left:40px;
		border-radius:50%;
		background-color:white;
	}

	div{
		position:relative;
		
		
		margin:100px auto;
		box-shadow:0 0 2px red;
		background-color:#ccc;
	}