运用CSS怎样实现三角形和箭头的小图标效果？

发布时间：2023-08-11 14:35:01 所属栏目：语言来源：

导读：用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;

}

（编辑：聊城站长网）

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