首页 > 网页制作 > CSS

使用css实现特殊标志或图形

admin CSS 2022-02-05 22:53:48 css   特殊标志"

1. 前言

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

2. 实例展示:

三角形示例

示例代码:


方向箭头示例 

示例代码:

空缺圆

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

到此这篇关于使用css实现特殊标志或图形的文章就介绍到这了,更多相关css特殊标志内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章,希望大家以后多多支持潘少俊衡!

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/CSS/74058.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持