简单利用CSS做出小三角图标

最新推荐文章于 2023-02-02 14:32:40 发布

海阔天空ZMZ

最新推荐文章于 2023-02-02 14:32:40 发布

阅读量624

点赞数

分类专栏： HTML+CSS 文章标签： CSS 小三角

本文链接：https://blog.csdn.net/weixin_45457515/article/details/97611860

版权

HTML+CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在浏览网页时，我们有时会看到这种三角形的小图标
在这里插入图片描述
这里我们只需要一组简单的CSS代码即可实现
首先创建一个盒子容器

<body>
    <div class="box"></div>
</body>

创建如下CSS代码

<style>
    .box {
        width: 0px;
        height: 0px;
        border-width: 5px 5px 5px 5px;
        border-style: solid;
      
        border-color: gray transparent  transparent transparent;
    }
    
    </style>

简单讲解一下原理：
将盒子的宽高都设为0像素；（但注意不能不写宽高，因为我们需
要撑起盒子）；
设置盒子边框的大小（边框宽度即小三角的大小，且边框类型一般
为实线）；
设置自己需要位置边框的颜色，其他位置设为透明色

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

海阔天空ZMZ

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

css实现小三角

peppa_pig的博客

11-12

834

下面代码想要实现这样的小三角 width: 0px; height: 0px; *width: 4px; *height: 4px; font-size: 0; line-height: 0; overflow: hidden; border-width: 4px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent #236FBD; 这样写可以适应大多浏览器 ..

前端学习笔记（四）--CSS控制UL LI 的样式详解(推荐)及纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）

笑桐笔记的博客

04-08

6669

DIV+CSS里，我们用得最多的就是ul li来显示数据，如新闻按钮等。下面给大家一个css ul li的例子供学习<div id="menu"> <ul> <li><a href="#">首页</a></li> <li class="menuDiv"&g

参与评论您还未登录，请先登录后发表或查看评论

使用css实现小三角

qq_42919799的博客

11-03

351

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .class { .

css补充（1）：css实现小三角，精灵图，字体图标

CYL_2021的博客

04-17

1400

一.css实现小三角 1.1 三角形实现 html: <div class="sanjiao"> </div> css: .sanjiao { /* 高度和宽度必须指定为零 */ width: 0; height: 0; /* 给四边都设置边框和颜色 */ border-bottom: 30px solid #a1ffb8; border-top: 30px solid #d600d6; border-left: 30px s

使用CSS3制作三角形小图标

u011927449的博客

05-10

203

话不多说，直接写代码，希望能够对大家有所帮助！ 1.html代码如下： <a href="#" class="usetohover"> <div class="triangle_border_right"></div> </a> <div class="ball"> <div class="triangle_border_up rotate-back"></div> </div>

做一个小三角形标志

qq_39315434的博客

08-16

807

<!DOCTYPE html> <html> <head> <style> #box { width: 200px; height: 200px; margin-top: 50px; margin-left: 50px; background-color: #...

自己动手丰衣足食之气泡框和常见css图形（三角）

黄沙百战穿金甲，不破楼兰终不还。

02-21

4819

气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示：拆分来看，形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便，可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HT

CSS学习笔记

YuKing_HONG的博客

10-17

1470

个人学习PINK老师课程的笔记。个人笔记写得不好，敬请见谅，如果有问题没关系，那是正常的。记错了欢迎指出了。

css总结

love_dzq的博客

05-20

2211

对CSS2以及CSS3和移动端布局方式做了个总结

前端面试-CSS

wanglu458512的博客

09-19

3010

一、CSS基础 CSS选择器及其优先级对于选择器的优先级：标签选择器、伪元素选择器：1 类选择器、伪类选择器、属性选择器：10 id 选择器：100 内联样式：1000 注意事项： !important声明的样式的优先级最高；如果优先级相同，则最后出现的样式生效；继承得到的样式的优先级最低；通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用

css制作三角标志

weixin_52563089的博客

10-16

248

border-top:#FFFFFF solid 3px; border-left: #FFFFFF solid 3px; transform: rotate(-45deg);

css三角标

showkw的博客

08-05

392

css实现列表三角标

CSS如何实现小三角

qq_54598875的博客

04-01

2070

CSS中快速实现小三角

用CSS3实现带小三角形的div框(不用图片)

Vivianluolita的专栏

10-25

2848

1.用CSS3实现带小三角形的div框(不用图片) 2.css 中的background:transparent到底是什么意思有什么作用

css实现三角形形状

01-20

720

下面用CSS3分别实现向上、下、左、右的三角形 /*箭头向上*/ .arrow-up { width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent; border-bottom:30px solid #fff;

CSS3实现三角小图标

简单就是美

05-30

7476

CSS3的transform可以实现页面元素的扭转、变形等功能。实现如下图所示的三角形小图标只需要transform定义的一行代码即可，无需再使用图片。

CSS：一个div实现折角效果