CSS---三角的做法

透明边框技巧：0宽0高设置实线框与兼容性考量
最新推荐文章于 2025-12-02 22:03:53 发布
原创 最新推荐文章于 2025-12-02 22:03:53 发布 · 192 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #前端

本文详细介绍了如何通过设置宽度和高度为0，同时使用透明边框创建视觉效果，并特别关注了为了保持跨浏览器兼容性而加入的line-height和font-size调整策略。

首先让 宽高必须为 0

设置透明的实线边框

boder-方位(例子: left right)-color: ;

例子:

.名 {

width: 0;

height: 0;

border: 50px solid transpare;

border-left-color: red;

}

显示为:

                        

 

        其中的                line-height: 0;

                                   font-size: 0;

                        是为了照顾兼容性

css--实现透明三角形
09-20
css--实现透明三角形(来自百度web前端工程师试题)
Web前端-HTML+CSS-炫酷圣诞树
12-25
因此，在设计时应确保CSS样式简洁高效，避免过度使用高复杂度的CSS选择器和属性，以及减少不必要的JavaScript逻辑，以保持网页的加载速度和运行流畅性。 通过HTML和CSS技术，我们可以创造出既炫酷又实用的圣诞树...
CSS-IN-JS
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
10-23 1616
CSS-IN-JS
002-CSS-三角形
loveEveryWeb的博客
03-01 706
Tips：在普通三角形基础上，添加 box-shadow ，设置阴影方向、偏移量，搭配伪元素遮挡 实现。Tips：filter 为滤镜的意思，可实现很多特殊样式。此处采用 filter 实现阴影。Tips：设置 div 盒子宽高为零，使用单边框实现。
CSS - CSS三角
qq_33962481的博客
05-26 2711
文章目录一、CSS三角的做法案例 一、CSS三角的做法 盒子的宽高必须为0 指定一个透明的实线边框, 边框的粗细影响三角的大小 如果想要一个朝右的三角, 就把左边框加一个颜色 div { width: 0; height: 0; line-height: 0; font-size: 0; border: 50px solid transparent; border-left-color: red; } line-height: 0; font-size: 0; 这两句是为了照顾兼容性
css-左三角
qq_41670147的博客
10-31 966
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
HTML+CSS-三角形的边框
cai_niao5623的博客
11-04 1341
首先用css制作一个三角形 <style> .triangle { width: 0; height: 0; border-top: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid chocolate; border-left: 30px solid transp
CSS-基础篇
热门推荐
rfalcon的博客
05-18 2万+
CSS基础部分自学笔记 内联样式 也称行内或行间样式，是在html标签上添加style属性来实现的 内部样式 在<style></style>标签内添加的样式，内部样式的代码可以复用、符合W3C标准，尽量让结构和样式分开处理 外部样式 <link rel="stylesheet" href=""> rel：指定资源跟页面的关系 href：资源的地址 @import url(./common.css); 这种方式有很多问题，不建议使用 颜色表示法 单词表示法
HTML+CSS-有三角形的边框
qq_41728872的博客
08-10 3541
矩形框/对话框上如何添加一个小三角形呢 第一种，较简单，个人蛮喜欢的 大致思路： 1.首先画两个矩形框box1，box2，box1较大，给个border-radius属性 2.box1保持不变，box2的左和上边border为透明（视情况而定，反正选两条相邻边）,得到一个直角。 3.将2得到box2进行旋转，并用相对定位，使其与box1拼接起来 4.再将box2的background设为透明，去掉...
css-直角不等边三角形的实现
qq_39111074的博客
08-24 1111
有的地方会用到直角不等边三角形， 代码示例： <!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 -webkit-text-security
qq_20765533的博客
06-03 1470
-webkit-text-security 可选值、语法、兼容性介绍。
CSS - 盒子模型
优快云
07-20 1017
盒子模型 content-box border-box box-sizing padding padding妙用 border border三角 margin margin:0 auto 水平居中原理 margin:auto margin合并 外边距合并 BFC margin负值
CSS-Notes:CSS相关综合专栏。 计划包含四个方面： ①CSS基础②进阶专题③面试题汇总④一些有意思的奇技淫巧
05-09
CSS-Notes 目录 CSS基础 09-Flex弹性布局 10-Grid网格布局 11-媒体查询 CSS进阶 专题总结-兼容性问题 专题总结-居中问题 专题总结-常用布局 专题总结-回流重绘 技巧总结-幽灵空白节点 专题总结-移动端1px问题 技巧...
CSS 网页布局：技术基础与实践技巧
最新发布
csbysj2020的博客
12-02 366
CSS网页布局是前端开发中的核心技术之一，掌握CSS布局的基础知识和实践技巧对于成为一名优秀的前端开发者至关重要。本文介绍了CSS布局的基础知识、布局模型、实践技巧以及响应式布局，希望对读者有所帮助。
css 父节点设置display: flex； align-items: center；，子节点如何跟随其他子节点撑高的高度
PrimaryColor
12-02 47
父节点设置display: flex;，子节点如何跟随其他子节点撑高的高度？如果子节点设置了height，那么需要取消height的属性，让height为auto。
主题切换（1）：css变量的使用（:root）
Z_Wonderful的博客
12-01 344
:root 是一个伪类选择器，它匹配文档的根元素（即 <html> 元素）。使用 :root 定义 CSS 变量（自定义属性）可以让变量具有全局作用域，方便在整个项目中统一管理和动态调整样式
[Vue]AntV1.7表格自带筛选确定和重置按钮位置交换
萌狼蓝天の技术栈
12-01 328
原来： 修改后：代码如下： 贴上AI的笔记(因为这个问题就是交给AI解决的 —— 感谢Kiro)需要自定义 Ant Design Vue 表格筛选器下拉框中的按钮样式：由于筛选器下拉框是通过 Portal 渲染到 body 下的，scoped 样式无法生效，需要添加一个不带 的 标签。 2. 关键技术点 2.1 Flexbox 布局控制顺序 使用 启用弹性布局 使用 属性控制元素顺序( 在前， 在后) 使用 让按钮分别靠左右两边 2.2 选择器精确度 使用完整的类名链： 2.3 样式优先级
HTML/CSS 核心考点详解（字节跳动 ToB 中台场景）
2402_87628679的博客
12-01 751
语义化 HTML 就是用有明确含义的标签（如<header><nav><main>）替代无意义的通用标签<div>，让 HTML 结构 “自解释”—— 不用看 CSS/JS，就能看懂页面各部分的功能。块级格式化上下文，是一个 “独立的渲染区域”，区域内的元素布局不受外部影响，同时也不会影响外部元素。可以理解为：BFC 是一个 “隔离的盒子”，盒子里的元素怎么布局，都和盒子外的元素没关系。知识点核心考点实战场景语义化 HTML常用语义标签、结构合理性系统页面布局、模块划分Flex 布局。
html css js网页制作成品——鹿晗html+css+js 4页附源码
卡拉米
12-01 541
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
css linear-gradient右三角
06-22
一个简单的做法是使用两个三角形方向相反的渐变，并叠加它们。首先，创建一个标准的线性渐变，然后使用伪元素（如`:before`和`:after`) 作为三角形的顶点，并应用负的`transform: skewY(-90deg)`来反转其中一个...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值