纯css绘制三角形图标

最新推荐文章于 2025-06-16 00:15:47 发布

Hong Jet

最新推荐文章于 2025-06-16 00:15:47 发布

阅读量969

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/smlljet/article/details/89882612

css 专栏收录该内容

8 篇文章

订阅专栏

博客介绍了通过改变border - color属性值来实现特定效果。关键是将宽度和高度设为0px，设置border，通过设置不同方向的颜色值，让想要三角形指向的反向颜色值正常设置，其他方向设为透明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <div class="carset">	</div>  
   .carset{
		display: inline-block;
		width: 0px;
		height:0px;
		border-style: solid;
		border-width: 8px;
		border-color: transparent  transparent  transparent red; 
	}

在这里插入图片描述
改变border-color属性值

  border-color: transparent  transparent red  transparent ;

效果如下
在这里插入图片描述
关键点在于设置宽度高度都为0px,然后设置border，想要三角形指向哪边就设置其反向颜色值，其它方向颜色值设置透明

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Hong Jet

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

css3 纯css实现绘制三角形、箭头效果

weixin_43565197的博客

08-21

2241

在前端工作中遇到三角形或者需要箭头的样式，我们不仅可以利用图片来实现效果，还可以利用css来实现。 <div class="triangle"></div> 1、利用border来实现 (1)向下三角形 .triangle{ width: 0; height: 0; border-width: 100px; border-style: solid; b...

纯css图标.rar

09-18

100个常用纯CSS图标（icono-home,icono-mail,icono-rss,icono-hamburger,icono-plus,icono-cross,icono-check,icono-power,icono-heart,icono-flag,icono-share,icono-pin,icono-locationArrow,icono-asterisk,icono-image,icono-video,icono-music,icono-document,icono-file,icono-folder,icono-smile,icono-frown,icono-meh,icono-user,icono-eye,icono-sliders,icono-infinity,icono-sync,icono-sync spin,icono-reset,icono-reset spin,icono-gear,icono-gear spin,icono-signIn,icono-signOut,icono-book,icono-support,icono-dropper,icono-chain,icono-paperClip,icono-search,icono-rename,icono-crop,icono-trash,icono-keyboard,icono-mouse,icono-headphone,icono-microphone,icono-display,icono-imac,icono-iphone,icono-macbook,icono-imacBold,icono-iphoneBold,icono-macbookBold,icono-nexus,icono-terminal,icono-youtube,icono-market,icono-clock,icono-tiles,icono-list,icono-forbidden,icono-plusCircle,icono-crossCircle,icono-checkCircle,icono-exclamationCircle,icono-exclamation,icono-textAlignRight,icono-textAlignCenter,icono-textAlignLeft,icono-indent,icono-outdent,icono-comment,icono-commentEmpty,icono-areaChart,icono-pieChart,icono-barChart,icono-bookmark,icono-bookmarkEmpty,icono-filter,icono-volume,icono-volumeLow,icono-volumeMedium,icono-volumeHigh,icono-volumeDecrease,icono-volumeIncrease,icono-volumeMute,icono-tag,icono-calendar,icono-camera,icono-piano,icono-ruler,icono-cup,icono-creditCard,icono-facebook,icono-twitter,icono-instagram,icono-linkedIn,icono-flickr,icono-delicious,icono-codepen,icono-blogger）

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

用css画三角形

04-10

用纯css绘制三角形，不是用图片

纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）

weixin_30730053的博客

03-26

334

三角形 <div class="box"></div> <style>.box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid ...

使用CSS创建三角形图标

最新发布

2301_76989410的博客

06-16

408

CSS 三角形是利用边框相交特性实现的：元素设置为零尺寸 (width: 0;height: 0通过控制不同方向边框的透明/显色状态边框相交处形成斜切角效果3.2两种主要实现方法对比方法代码示例生成形状特点典型应用场景双边框法border-left/right:透明;border-top:显色等腰三角形对称、比例精确可控下拉箭头、工具提示单边框法border-bottom:显色;border-left:透明直角三角形不对称、可做特殊角度折角效果、装饰元素。

聊聊纯 CSS 图标

LuckyWinty的博客

11-09

635

感谢印记中文的 QC-L[1] 对本文进行翻译，英文原文: English Version[2]。在重新构想原子化 CSS中，我提到了 UnoCSS[4] 的一个预设，它提供了在纯 C...

经典CSS实现三角形图标原理解析

weixin_30552635的博客

12-06

183

前言：　　在写这篇文章之前，我也看过很多前端大神写的代码，But，都只是粘贴代码和给出显示效果，对于初学者来说大家都喜欢刨根问底，为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解： border边框语法： border四条边框设置 border-left设置左边框，一般单独设置左边框样式使用 border-right设置右边框，一般单独设置右边框...

【css】绘制三角形

坚强的泡沫的博客

03-08

257

简单三角形的绘制原理：利用元素的border属性为元素添加border属性， <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css绘制三角形</title> <style> div{ width: 50px; height: 50px; border: 2px solid red; } &

Html+CSS绘制三角形图标

09-28

本文将详细介绍如何使用HTML和CSS3绘制三角形图标。首先，我们需要了解CSS3中的边框（border）属性。边框宽度（border-width）、边框样式（border-style）和边框颜色（border-color）是控制边框的关键。当一个元素...

CSS技巧：如何用纯CSS绘制三角形

在前端开发中，有时候我们需要创建特定的图形，例如三角形，用于各种设计元素，如地址选择器或播放按钮的图标。本篇讨论如何仅使用CSS来实现一个三角形，并解释其背后的原理。 CSS画三角形的核心在于理解CSS边框和...

纯CSS3绘制的饮料和披萨卡通图标效果源码.zip

11-20

在本资源中，我们主要探讨的是使用纯CSS3技术来绘制饮料和披萨的卡通图标。CSS3是层叠样式表（Cascading Style Sheets）的第三版，它极大地扩展了网页设计的能力，允许开发者创建出更为丰富和动态的视觉效果，而无需...

用css绘制三角形

qq_43077362的博客

04-26

328

一、 .tri1 { width: 0; height: 0; border-color: red blue red blue; border-width: 50px 50px 50px 50px; border-style: solid; } 二、 .tri2 { ...

CSS绘制三角形

waiting_area的博客

02-13

334

这是我们平常使用border最普遍的情况——往往只给border一个较小的宽度（通常为1-2px）；然而这样的日常用法就会容易让大家对border的形成方式产生误解，即认为元素的border是由四个矩形边框拼接而成。然而事实并不是这样。实际上，元素的border是由三角形组合而成，为了说明这个问题，我们可以增大border的宽度，并为各border边设置不同的颜色： div { width: 50px; height: 50px; border: 40px solid;

css绘制三角形

weixin_41812196的博客

10-06

135

css绘制三角形

【CSS】使用 CSS 绘制三角形

小秀的博客

05-14

1350

原理：通过设置元素的宽高为 0，利用透明边框相交形成三角形。• 优点：支持任意形状，容器可添加内容，响应式自适应。• 缺点：低版本浏览器兼容性差（如 IE 不支持）• 优点：兼容性极佳（包括 IE8+），代码简单。• 优点：支持复杂渐变效果，容器保留原有尺寸。• 等边三角形：需计算边框宽度比例（如底边。• 缺点：实现复杂度高，需调试角度和断点。• 缺点：无法在三角形内部添加内容。• 方向控制：调整坐标点顺序（如。• 缺点：依赖字体库，样式控制有限。• 方向控制：调整渐变角度（如。

令人难以置信的纯 CSS3 图标