用css绘制一个三角形的div

最新推荐文章于 2026-07-18 10:05:52 发布

原创最新推荐文章于 2026-07-18 10:05:52 发布 · 387 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

博客以倒三角为例，给出了一段CSS代码。通过设置div的宽高为0，左右边框为50px透明，上边框为100px红色，最终能显示出一个红色面积的倒三角，展示了利用CSS实现特定图形的方法。

以倒三角为例:
div{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
左右两边边长为50透明
上边边长100
显示出来的就是一个红色面积的倒三角

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

干嘛又给我转钱

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

PyTorch 最新安装教程（2021-07-27）

07-27

23万+

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

微信小程序 - 详细实现可移动悬浮按钮，全屏悬浮元素图标可拖动拖拽并自动吸附边缘，微信小程序实现悬浮球吸附边缘+计算靠边靠拢效果（详细代码，拖拽中途放手，靠左就自动跑到屏幕左侧，反之靠右跑到屏幕右侧）

🏆 前端领域优质创作者

04-09

1万+

微信小程序，vue2，vue3，微信小程序悬浮功能小按钮，自动吸附边缘效果，微信小程序之可拖动悬浮按钮的实现，如何实现靠近边缘自动吸住功能，小程序右下角的悬浮效果，实现可拖动悬浮图标，自动向两边靠拢，悬浮按钮的实现，微信小程序悬浮球效果，微信小程序（可拖动悬浮按钮）当靠近屏幕边缘时会磁吸靠近，如何实现全局悬浮按钮，悬浮球判断吸附在左右，全屏悬浮能拖着走，小程序怎么做悬浮图标靠近左右两侧能吸附住，悬浮菜单按钮，悬浮球可拖拽，全局悬浮球，全局悬浮框，实现悬浮按钮可拖动，自动吸附边缘效果，若按钮此时位于页面中间偏

如何用css实现倒三角与正三角样式

前端小陈的成长记录

06-22

1802

css实现倒三角与正三角

北京大学MuMo多模态肿瘤分类模型复现与迁移学习

max500600的博客

08-27

1210

本项目复现了北京大学MuMo多模态肿瘤分类模型，并针对特定医学影像数据集进行迁移学习。MuMo模型通过整合CT、MRI、PET等多模态医学影像数据，显著提升了肿瘤分类准确性。项目内容包括环境配置（Python 3.8+、PyTorch 1.9+）、数据预处理（DICOM/NIfTI格式处理、强度归一化）、多模态数据集类实现，以及训练验证测试集划分。关键特点是采用MONAI医学影像处理库，实现三维医学影像的标准化预处理流程，并支持多种模态数据的并行加载与联合训练，为后续模型复现和迁移学习奠定基础。

利用CSS实现各种三角形

DepressedPrince的博客

06-26

424

前言在做前端开发的时候，我们可能会遇到很多需要做三角形的情况，下面就介绍一下使用ＣＳＳ的transparent属性实现各种各样的三角形。示例：（红色的正倒三角形）.box{　　 height: 0px; //宽和高必须设为０px width: 0px; border-top:10px solid red; border-left:10px solid transp...

PHP文件上传漏洞解析与防御实战

最新发布

weixin_30654583的博客

07-18

605

文件上传是Web开发中的基础功能，但也是安全风险高发区。其核心原理在于服务端未对用户提交的文件内容、类型、扩展名进行严格校验，导致攻击者可上传恶意文件（如WebShell）。通过MIME类型检测、文件内容校验、白名单控制等防护手段，结合服务器权限配置（如禁用上传目录执行权限），能有效防范文件上传漏洞。PHP开发中需特别注意双扩展名绕过、空字节截断等攻击手法，推荐使用Symfony File组件等成熟方案。在电商、社交平台等文件交互频繁的场景中，完善的文件上传安全机制是保障系统安全的重要环节。

给某个div加一个小三角形

五颜六色的白

05-17

1955

给某个div加一个小三角形 .div{ line-height: 50 / $p; width: 140 / $p;## 标题 background: #F7F7F7; position: relative; font-size:18/$p; color:#B3B3B3 ; text-align: center; border-radius: 10/$p; } .div::before { //这里就是小三角了 content: ""; display: bloc

css实现倒三角的最简单方法

Amouzy的博客

09-07

1万+

css实现倒三角的最简单方法 1. css边框： html <div class="h"></div> css: .h{ width: 0px; height: 0px; border: 50px solid transparent; border-top-color: red; } 最终呈现结果：如果想要其它方向的三角，很简单，直接改成border-left-color，border-right-color或者border-bottom-c

html div CSS 实现倒三角

jaylongli的专栏

08-29

6332

<html> <head> <style> .boder { position:relative; /*border:1px solid red;*/ overflow:hidden; } ...

css绘制自适应三角形 矩形一个div里面最多可以绘制几个圆

xiaoxiaofly的博客

09-11

742

一 .三角形绘制样式如下： <style> .triple { width: 0px; height: 0px; border-top:100px solid transparent; border-left: 100px solid transparent; border-bot...

使用CSS画一个三角形

cbat的博客

08-09

3万+

使用CSS画一个三角形

如何利用htmlcss绘制一个三角形

EWJRQKJRQ的博客

07-31

925

如何利用htmlcss绘制一个简易的三角形 如何利用htmlcss绘制一个三角形 新建一个div <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>纯css绘制三角形</titl

三角形css_使用css绘制三角形

weixin_39928736的博客

12-17

133

好看的前端网页大家见到的应该都不少但是很多都是用图片作为背景今天我们就给大家讲讲怎么用css绘制图形(图形如下)----------------------------------------------------------------------首先可以看到有一个div盒子宽300个像素值width: 300px;高100个像素值height: 100px;边框1个像素值并且是黑色...

html div三角形,css+div打造三角形(箭头)

weixin_39828783的博客

06-05

1664

在很多网站都见过这样的箭头，之前我一直以为是图片，直到今天才知道原来可以用css做。开始看代码没太看懂，后来自己试了几遍才恍然大悟。贴出来分享下。(大神请直接忽略)先看代码：HTML部分就是一个单纯的div。.sanjiao{width:0px;height:0px;overflow:hidden;border-width:10px;border-color:transparent transpa...

css 修改三角形大小_使用css绘制三角形

weixin_36371906的博客

01-13

213

css实现一个三角形

Alexbyy的博客

09-25

350

css实现一个三角形 HTML代码 <div class="div"> 这是一个三角形 </div> 做法：通过设置border来实现。如下所示，将div的box-sizing设为IE盒模型后，设置border的属性，效果如下图，可以看出是由四个三角形组成，所以我们将其中任意三个border的颜色设为透明后，剩下的就是三角形。 .div{ box-sizing:bo...

html中形状代码,用css与div代码绘制一些常见的各种形状的图形

weixin_39652658的博客

06-03

1398

在制作网页的时候我们为了增添页面的美观性，会在页面中添加一些图案或者将页面部分区块设置为特殊形状.如果全部使用图片会使页面体积增大，造成加载速度慢等问题,那么怎样使用div+css实现一些简单的图形绘制呢？在div+css布局时，我们一般是在页面中绘制一个个矩形，然后使用浮动来控制页面中矩形所在的位置代码如下：.juxing {width: 500px;height: 100px;}需要用css绘...

如何用css写出一个三角形

qq_43358996的博客

08-24

1968

用css写出一个三角形 1.div盒子宽高设为0，用边框填满盒子区域浏览器中展示效果如下： 2.分别设置三个边框的颜色浏览器中的显示效果： 3.将三个边框的颜色更改为透明色，三角形显示出来效果如下： ...

CSS三角形如何工作？

asdfgh0077的博客

03-30

203

There're plenty of different CSS shapes over at CSS Tricks - Shapes of CSS and I'm particularly puz

用Div+CSS完成一个等腰梯形

lelewang123的博客

11-09

5891

1.思路：等腰梯形实质上是顶点在同一点的两个相似三角形叠加在一起的的非公共部分。我们知道，用CSS很容易地能做出一个三角形，所以同理，做出一个等腰梯形也不是很困难。我们只需要将内部的div水平垂直定位在外部div的内部，然后通过border大法绘出一个三角形，内部div其实并不一定要是一个三角形，因为内部div的主要用途在于覆盖外部三角形的一部分，使之成为一个等腰梯形，所以对外部div来说只需设置

opengl 绘制正方形边框_只用1个div，你能用CSS绘制：正3、4、5、6、7、8边形吗？...

weixin_39812039的博客

12-03

529

给你一个div，你能用CSS绘制一个正三角形、正方形、正五边形、正六边形、正七边形、正八边形吗？今天我们来玩一个有趣的CSS实验，想象下，只用一个div，你能用CSS绘制一个正三角形、正方形、正五边形、正六边形、正七边形、正八边形吗？今天笔者带着大家一起动手实践下这个有趣的联系，由于正多边形用到不少三角函数计算，为了方便计算，这里正多边形统一设定为100px，为啥只做到正八边形？因为就一个div最...

php绘制一个三角形,如何用CSS制作一个三角形（附代码）

weixin_30513765的博客

03-10

347

CSS中的属性非常神奇，它可以制作很多我们意想不到的图形。这篇文章主要想和大家分享如何用CSS制作一个三角形，感兴趣的朋友可以参考一下，希望对你有所帮助。首先我们新建一个100x100的正方形div，为了方便我们查看，设置一个背景颜色。css代码如下：width: 100px;height: 100px;background-color: #333;接着给这个div添加两个border，width...

用css制作带三角矩形

www.hhspace.cn

06-17

7798

在网页中通常会见到一种带三角的矩形框，常见于注释或者弹框提示。在百度2015校园招聘的笔试题目中也有一道题目要求利用css来绘出一个带三角矩形。如图所示。在css中，三角形是采用盒子模型的border属性来绘制的。所以在进行上图绘制之前有必要回顾一下css盒子模型。css盒子模型同一方向共有四个属性，比如横向有margin，border，padding，width。其中width指定内容

unity插件FX Maker

unity插件FX Maker插件，安装了fx make后显示红色报错，一般是因为fx的脚本与u3d已经有了的脚本起了冲突，删除相应脚本即可

《贝叶斯数据分析(英文导读版·原书第3版)》（Bayesian Data Analysis）

这本书2014年出版，一直没看，发现2016年出版了带导读的英文版，就把它放上来了。它从贝叶斯讲到马尔科夫、吉布斯抽样、回归模型，洋洋洒洒六百多页，挺厚的一本，