用CSS怎样实现三角形和箭头的小图标效果？在网站设计中，我们经常会需要使用到一些小图片，但是如果网站的图片太多，不仅不好管理，而且还会拖累网站的速度，因此，很多时候我们会使用一些简单的标签样式来实现简单的图形标志来替代图片，这篇给大家分享三角形和箭头的小图标效果的实现。

    实例展示：

    三角形示例

    示例代码：

<style type="text/css">
.triangle b {
    border: 5px solid #fff;
    border-left: 5px solid #353535;
    margin: 0;
    font-size: 0;
}
</style>

    方向箭头示例　

    示例代码：

<style type="text/css">
 .mark b{border:solid #D0D0D0;width:6px;height:6px;display:inline-block;}
 .mark  b.lmark{border-width:2px 2px 0 0;transform: rotate(45deg);}
 </style>

    空缺圆

 	*{
		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实现三角形和箭头的小图标效果的介绍，感兴趣的朋友可以参考上述代码，当然还能实现更多的小图标样式，大家可以自己来尝试看看，如果想要了解更多，也可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 在CSS3中怎么让元素做缩放动画，方法是什么

  css中，可利用“@keyframes”规则、animation和transform属性实现缩放动画效果，语法为“元素{animation:名称 时间}@keyframes 名称{100%{transform:scale(x,y);}}”。

• CSS3中让元素平移的属性是什么，怎么应用

  在css3中可以实现平移效果的属性是“transform”。transform属性配合translate()函数使用可以对元素进行平移操作，语法为“元素{transform:translate(横向平移值,竖向平移值);}”。

• 取消CSS中标题样式的方法是什么

  方法：1、用“padding:0;margin:0;”样式去除标题元素内外边距样式；2、用“font-weight:normal;”样式去除标题元素的加粗样式；3、用“font-size:16px;”样式设置标题字体大小为正常大小即可。

• 如何理解CSS文档流，有几种类型

  文档流简介什么叫“文档流”？简单来说，就是指元素在页面中出现的先后顺序。可分为“正常文档流”和“脱离文档流”。1、正常文档流正常文档流，

• CSS中如何实现各种样式的导航栏，代码是什么

  本篇文章给大家带来了关于css的相关知识，其中主要介绍了关于基础css导航栏和下拉菜单的实现属性等相关问题，使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单，下面一起来看一下，希望对大家有帮助。