利用边框来设计三角形小图标

最新推荐文章于 2022-01-02 00:43:41 发布
最新推荐文章于 2022-01-02 00:43:41 发布
阅读量340 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44552233/article/details/86566257
版权

大部分网页设计都需要用到很多图标，那么如何不用img就能制作一个小图标的？
下面我给大家介绍一个不用压缩包图片的图标制作
我们可以利用CSS中border的属性来制作
border是一个复合属性 有border-width border-color boder-style 三个属性
首先放置一个i标签 设置好边框属性之后 利用边框颜色和定位来实现效果
（transparent这个属性代表透明 是设置图标方向的核心 指向哪边就设置相反的颜色其余都为透明即可） 具体如图：在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

SIuly
关注
专栏目录
边框实现三角形
Cindy_CY的博客
08-15 924
边框实现三角形            边框实现三角形              .triangle {      /*不给div设置宽高，只设置边框，并且边框无限大的话它就会无限趋向于中心。*/             width: 0;             height: 0;            /* width: 100px;             h
前端小技巧（一）：边框写三角形
柒钥的博客
09-26 8041
边框写三角形，这个技能从事前端的小伙伴应该都不陌生，不过大多数都是知其然而不知其所以然，今天我们就来探究一下这里面的原理随意的在页面上给一个盒子，然后给一个边框来看看div{ width:100px; height:100px; border:10px solid #f00283; }这样的一段代码，给到盒子的宽高都是100像素，然后10个像素实线的红色边框，效果图如下，看起
学习笔记——利用边框实现三角形
qq_41339126的博客
03-18 152
使用CSS+HTML实现三角形，其中三角形的实现原理利用了边框中的属性。 1. 代码 .box { width: 0px; height: 0px; border-width: 100px; border-style: solid; border-right-color: tr.
做一个小三角形标志
qq_39315434的博客
08-16 809
<!DOCTYPE html> <html> <head> <style> #box { width: 200px; height: 200px; margin-top: 50px; margin-left: 50px; background-color: #...
仿微信的图片剪裁，带小三角样式。
coder_nice的专栏
01-27 2641
今天是我第一次在github上写开源项目，分享给更多的人，觉得很充实。 以后要多多坚持。 https://github.com/nicewarm/WeChatImageClipping
html三角形小图标,纯css实现全兼容三角形图标
weixin_39529914的博客
06-03 287
在当前流行的的网站上，我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单)，简单的方式可以使用一张图片代替，但是随着前端技术的发展，以及开发者对于前端性能的“吹毛求疵”，越来越多的前端开发者开始“返璞归真”，在能不使用图片的场景中减少图片使用，css图标相对于图片还有个优势是我们可以方便的定制图标的大小以及颜色。css实现三角形图标已不是什么新鲜技术，之前也有很多相关的技术文章，这篇文章主要...
边框三角形的实现
paopaosama的博客
08-28 1807
实用小知识：边框三角形 这里利用了这个知识点：同一个元素中，相邻的两个边框交接处是斜角。 因此，如果我们需要在页面中实现一个三角形，可以通过设置边框来实现： <style> div{ width:0; height:0; border-width:10px; bord...
Html+CSS绘制三角形图标
09-28
在网页设计中，三角形图标是一种常见的元素，用于指示方向、创建提示或者美化布局。传统上，这些图标通常通过图像编辑软件如Photoshop切片来实现，然后作为图片资源嵌入到网页中。然而，随着CSS3的普及，我们可以...
详解css如何利用 :before :after 写小三角形
09-24
接下来，要创建带有不同边框样式的小三角形，可以通过`:before`和`:after`伪元素来实现。在实际操作中，我们首先需要一个定位为相对的元素作为参考容器，比如一个带有背景色的方框： ```css #demo { margin: 100px...
使用CSS实现小三角形效果【附实例】
09-24
例如，在CSS中定义了.message-box类来设置包含小三角形的容器样式，然后定义了.triangle-border、.tb-border和.tb-background类来分别设置三个三角形边框的颜色和位置，利用绝对定位将这些三角形定位到指定位置。...
边框做出小三角
DcTbnk的博客
03-07 185
1.效果 2.代码
css-利用border实现三角形箭头的原理
_wings的博客
12-22 929
css样式开发中，有时会使用一个三角形作为箭头的情形，那实现原理是怎样的呢？ 抛开理论，按下面流程演变一次，基本能懂个大概了。 1、首先，实现一个宽高为100px,边框为20px的盒子（为了便于区分，上下左右边框用了不同颜色）： 2、将宽高大小设为0，变成这样： 3、再去掉上边界： 4、最后一步，将左右边界设成透明， 三角形就出来了！！ 实现原理: 主要是利用的盒子边框交叉处的渲染特性。 ...
css实现实心三角形、有边框的三角形和空心三角形
热门推荐
LLL_liuhui的博客
07-04 2万+
1、实心三角形&lt;div class="up"&gt;&lt;/div&gt; &lt;!--向上的三角形--&gt; &lt;div class="down"&gt;&lt;/div&gt; &lt;!--向下的三角形--&gt; &lt;div class="left"&gt;&lt;/div&gt; &amp
CSS绘制小三角形/圆形等各种小图标的方法
double2的博客
10-24 7650
CSS绘制小三角形/圆形等各种小图标的方法切图时常常需要一些小图标辅助信息模块的表达，比如带有小三角选中状态的导航栏，气泡框等等。如果以图片的方式加载这些小图标会增加http的请求量，不利于性能优化，因此我们可以用CSS，HTML5 Canvas,SVG,基于base64的图片编码等方式实现图标的绘制。 下面主要介绍几种常用的CSS绘制小三角以及其他图形的方法： 利用border属性绘制小三角
使用边框属性制作三角形
weixin_47248426的博客
03-29 584
使用边框属性制作三角形 效果图 源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）
09-24
要创建三角形图标，可以通过CSS的边框属性来实现。当一个元素的宽度和高度都设置为0时，仅通过边框来形成一个可视的图形。例如，通过设置左、上、右边框透明，右边框为实心，就可以形成一个向右的三角形。CSS代码...
微信小程序样式三角形搭建
u012329294的专栏
03-25 1万+
直接上代码：.pledgecont::before { content: ''; width: 0; height: 0; border-bottom: 14px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent; position: absolute; top...
html边框如何制作三角形,如何用css3绘制有边框的三角形
weixin_35719236的博客
06-10 825
如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。这里就涉及到一个绝对定位的问题，上、下、左、右四种方向的三角形相对于父级定位是...
纯CSS写三角形-border法
weixin_34270865的博客
07-04 1573
(1)有边框的三角形 我们来写下带边框的三角形。 如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。 最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。 这里就涉及到...
CSS利用边框实现三角形详解(上)
m0_57371966的博客
01-02 6993
利用CSS边框实现三角形，以及进阶技巧
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值