css特殊图形--空缺圆、css伪类实现特殊图形

css特殊图形–空缺圆

1.Demo展示：

2 . Html布局：

3. css样式表：

 	*{
		padding:0;
		margin:0;
	}

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

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

4. 变更：

如果要使三角形出现在左边，把以下代码做相应的更改即可：

• 原来的：

  	top:-10px;
  

• 更改过后的：

  	top: 90px;
  

• 效果如下：
  
  注：
  特别注意 : before里面的 content、width、height 以及定位的使用 ;
  (其他方向类似)
  css伪类实现三角形，尖角，请查看：
  link(https://blog.csdn.net/qq_43495629/article/details/87806185).

~如遇错误，欢迎指正；

• 结束语…………………………福利时间到………………………………

  大家同为程序员，在这里给大家真诚的送上福利。

  福利链接点击这里！