用CSS怎样实现三角形小图标效果

发布时间：2023-12-27 20:15:20 所属栏目：语言来源：DaWei

导读： 用CSS怎样实现三角形和箭头的小图标效果？在网站设计中，我们经常会需要使用到一些小图片，但是如果网站的图片太多，不仅不好管理，而且还会拖累网站的速度，因此，很多时候我们会使用一些简

用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实现三角形和箭头的小图标效果的介绍，感兴趣的朋友可以参考上述代码，当然还能实现更多的小图标样式，大家可以自己来尝试看看。

（编辑：宁德站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!