用css画一个三角形

最新推荐文章于 2025-05-09 11:47:55 发布
最新推荐文章于 2025-05-09 11:47:55 发布
阅读量203 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css 文章标签： css web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/always_yang/article/details/90374917
博客给出了一段CSS代码，包含border - top、border - bottom和border - right属性设置，用于设置元素边框样式，如顶部和底部为10px透明边框，右侧为10px黑色边框，属于Web前端技术范畴。

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

[‎2019/‎5/‎20 14:49]
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #000;

在这里插入图片描述

CSS：N种使用CSS 绘制三角形的方法
Yummy的博客
04-13 3万+
目录 6种使用 CSS 实现三角形的技巧 1、使用 border 绘制三角形 2、使用 linear-gradient 绘制三角形 3、使用 conic-gradient 绘制三角形 4、transform: rotate 配合 overflow: hidden 绘制三角形 5、使用 clip-path 绘制三角形 6、利用字符绘制三角形 6种使用 CSS 实现三角形的技巧 1、使用 border 绘制三角形 使用 border 实现三角形应该是大部分人都掌握的，也是各种面经中经常出现的
css怎么绘制一个三角形
Twinkle_sone的博客
06-19 3193
在CSS中画三角形通常利用border属性来实现，通过设置三个边的宽度为0，并为一个边提供颜色，结合transform属性进行旋转，可以创建一个三角形。
Effective前端3：用CSS画一个三角形
weixin_34378045的博客
10-22 174
三角形的场景很常见，打开一个页面可以看到各种各样的三角形： 由于div一般是四边形，要画个三角形并不是那么直观。你可以贴一张png，但是这种办法有点low，或者是用svg的形式，但是太麻烦。三角形其实可以用CSS画出来。如上图提到，可以分为两种三角形，一种是纯色的三角形，第二种是有边框色的三角形，先介绍最简单的纯色三角形。 1. 三角形的画法 三角形可以用border画出来，首先...
[css]纯css绘制三角形
最新发布
ZhuAiQuan的博客
05-09 575
原理是通过绘制border边框来实现，边框颜色默认是透明transparent 而三角形的方向向哪一边（top, right, bottom, left），就设置哪一边的边框颜色。可以看到是一个矩形圆角边框外加一个箭头，聪明的你一定想到了用上面的方式来绘制三角形，然后自己设置矩形的border-radius来实现。这样就获得了一个向上的等腰三角形，注意不要设置它的width或者height，想要调整三角形的大小请设置它的border-width。
怎样用CSS画一个三角形
半夏_2021的博客
04-25 1万+
由于div一般是四边形，要画个三角形并不是那么直观，你可以贴一个png,也可以用svg的形式，但是太麻烦。三角形其实可以用CSS画出。可以分两种三角形： 一是纯色的三角形，二十有边框色的三角形 三角形可以 用border画出来，首先一个有四个border的div应该是这样的
如何用css画一个三角形
kidding_z的博客
07-27 713
用css画一个三角形 首先我们写一个空盒子，它的宽高我们都设为零，然后用盒子的边框，把它撑起来，变成一个正方形。 .box{ width: 0px; height: 0px; border-top: 10px solid pink ; border-right: 10px solid blue ; border-bottom: 10px solid red;
如何使用CSS画一个三角形，原理是什么？
程序员学习园地。
02-14 1492
CSS 三角形是“CSS Hack”的经典应用，核心在于理解边框叠加的几何特性。
使用css画一个三角形
02-21
可以使用CSS的border属性来创建一个三角形：``` div { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } ```
用CSS画一个带阴影的三角形的示例代码
01-19
怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 通过边框控制, border-left和...
如何用css绘制一个三角形
热门推荐
m0_53206841的博客
07-12 1万+
问题描述：用css绘制一个三角形，其实是利用视觉的效果，将三个边设置成相同的颜色，另一个边设置其他颜色，再通过设置四个边的形状绘制出三角效果的图形步骤：1、写一个宽高为0的盒子2、选择三角形的底边，将此边界设置为一个颜色，另外三边设置另一个颜色（一般设置白色），即可显示三角效果示例： 生成的三角效果如下： 可以根据自己的实际需要，和其他形状进行拼接完成想要的效果，或设置相应颜色、边界长度、边界样式完成想要的效果。...
CSS绘制三角形的四种方法
weixin_42448252的博客
04-23 3133
利用border属性、利用伪元素、利用transform、利用clip-path属性
使用css画出一个三角形
yanxiaosa的博客
03-18 1120
在网上看到一个面试题,如何只使用css画出一个三角形,在没有看到css之前,第一个想法就是使用canvas,但是在网上一搜,发现使用css只需要几句代码就可以搞定. 先看代码:/*用css画出一个三角形*/ #triangle-left { width: 0; height: 0; border-top: 100px solid trans
css画一个三角形
zerofine的专栏
09-05 416
.triangle{ border:10px solid; border-color: #333 transparent transparent transparent; width:0; }
用CSS画一个三角形
liu_qingyi的博客
03-02 276
不用canvas怎么画一个三角形 div{ border :150px soild transparent; width:0px; heigth:0px border-left-color:E6686A; border-top-width:0px; } 直接复制就OKl
css画三角形
Jane_3210的博客
10-14 1547
实现原理 将div的高和宽设置为0，然后设置四个border不同的颜色。效果如下： div#triangle{ width: 0; height: 0; border-top: 50px solid blue; border-right: 50px solid red; border-bottom: 50px solid green; bord...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值