用html写三角形

原创 已于 2022-03-25 17:13:15 修改 · 483 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css

于 2022-03-25 17:10:53 首次发布
本文介绍了一个简单的HTML页面，该页面使用CSS样式来绘制一个没有填充的黄色三角形。通过设置div元素的宽度和高度为0，并利用边框的特性创建出一个独特的视觉效果。

<!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">

<title>三角形</title>

<style>

.box {

width:0;

height:0;

border-width:50px 0px 50px 50px;

border-style:solid;

border-color: transparent transparent transparent yellow;

}

</style>

</head>

<body>

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

</body>

</html>

效果：

 

沙粒。
关注
css怎么绘制一个三角形
Twinkle_sone的博客
06-19 3375
在CSS中画三角形通常利用border属性来实现，通过设置三个边的宽度为0，并为一个边提供颜色，结合transform属性进行旋转，可以创建一个三角形。
html中js绘制等腰三角形,用js写直角三角形，等腰三角形，菱形
weixin_34835470的博客
06-05 959
//一、 画一个直角三角形//第几行*号数//*11//**22//***33//****44//*****55//规律：行数=*号数functionleft(n){//right为函数名，n为形式参数，用于接收实体参数。fo...
CSS3实现三角小图标
05-30
CSS3的transform可以实现页面元素的扭转、变形等功能。 实现如下图所示的三角形小图标只需要transform定义的一行代码即可，无需再使用图片。参考文档： http://blog.youkuaiyun.com/u014175572/article/details/51535543
纯CSS实现页面的尖角、小三角、不同方向尖角的方法小结
09-24
本文通过三种方法给大家介绍了基于css实现的页面的尖角、小三角、不同方向尖角效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧,需要的朋友可以参考下
CSS如何实现小三角
qq_54598875的博客
04-01 2133
CSS中快速实现小三角
通过CSS生成小三角
Hello_super的博客
02-11 649
HTML 通过CSS生成小三角 有些时候我们需要在特定的地方使用小三角，例如小米商城官网显示二维码的时候，下面的小三角。 其实这里实现的方式很简单，我们可以通过一个伪类::after配合边框来实现实现，具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三角形</title> <style>
用HTML写的三角形，大家可以参考一下
01-19
用HTML写的三角形，大家可以参考一下
Html+CSS绘制三角形图标
09-28
然而，随着CSS3的普及，我们可以利用HTML和CSS直接在网页上绘制出各种形状，包括三角形，这不仅提高了页面加载速度，也使得设计更加灵活。本文将详细介绍如何使用HTML和CSS3绘制三角形图标。 首先，我们需要了解CSS...
html5三角形碎片动画特效.zip
07-11
在这个"html5三角形碎片动画特效.zip"压缩包中，我们主要探讨的就是如何利用Canvas和JavaScript实现一个鼠标跟随的三角形碎片光标动画。 首先，我们需要理解Canvas的基本用法。在HTML中，`<canvas>`标签创建了一个...
精选资源
HTML5 SVG三角形矩阵动画特效
06-24
HTML5 SVG三角形矩阵动画特效是一种利用HTML5的可缩放矢量图形（SVG）技术实现的创新视觉效果。SVG是一种在网页上绘制图形的方法，它允许开发者创建清晰、高质量的图形，无论屏幕分辨率如何都能保持一致的显示效果。...
使用 CSS 创建一个三角形
lio-zero 的博客
04-29 244
假设我们有一个简单 div 标签： <div class="triangle"></div> 有什么办法可以画出一个三角形？本文将介绍几种方法实现它。 使用 border 实现 使用盒模型的 border 边框即可快速创建一个三角形。 我们只需要使用其中的三个边框就可以创建一个三角形形状。 所有边框应具有相同的 border-width。 三角形指向的另一侧(即，如果三角...
用css创建一个三角形
Stephen_Numb的博客
01-07 777
三角形在web页面应用很多，不过最常见的还是用来指示，比如悬浮框的边缘。其实三角形的原理比较简单，当一个元素的宽和高都为0的时候，那么border就是一个正方形，这个时候，我们只需要显示正方形的一部分就可以了。 这个正方形被划分为四个部分，上右下左。如果我们需要一个指向上方的三角形，只需要把下面的三角形显示出来，其他的三角形隐藏或者设为透明就可以了。 .box{
CSS实现小三角
weixin_43550766的博客
04-21 440
** 1、CSS实现下半部分向上按钮 <div class="menusys"> <span tabindex="0" class="menufont">公路</span> </div> .menusys{ float:left; height:64px; width:88px; cursor:pointer; &:focus{ /*实现点击效果*/ background: linear-gradient(#022281,#0b44
使用css实现小三角
qq_42919799的博客
11-03 414
<!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写一个小三角
qq_39905409的博客
08-28 762
.triangle{ width: 0px; height: 0px; *width: 1.6rem; *height: 1.6rem; font-size: 0; line-height: 0; overflow: hidden; border-width: 1r...
CSS - 制作三角形
HVENLY的博客
05-21 795
目录实现原理三角形制作案例一个简单的三角形带边框的三角形 实现原理 其实实现的原理很简单，就是通过css的border属性进行制作。那么为什么border属性这么神奇可以制作我们的三角形呢？因为border的本质就是三角形，我们来看看下面这个例子： html代码： <div class="box1"></div> css代码： .box1 { width: 0; height: 0; border-top: 40px solid pink; bor
用纯CSS创建一个三角形
sunnyjingqi的博客
08-07 500
面试经常会问到的用css样式写一个三角形，以下这篇文章主要讲解了三角形的原理，原理其实很简单，也可以由此延伸出其他图形的做法。 https://blog.youkuaiyun.com/weixin_37580235/article/details/80803479 矩形、圆形、三角形、多边形、爱心、八卦等 https://blog.youkuaiyun.com/DearMorning/article/detai...
纯css创建一个三角形
weixin_39808181的博客
02-25 335
第一步：先写一个border应用： .box{ width:100px; height:100px; border:3px solid; border-color:#1b93fb #1bfb24 #efad48 #ef4848; } 第二步：将border值增大，此时border渲染的不是正方形而是梯形 .box{ width:100px; height:100px; border:50px solid; border-color:#1b93fb #1bfb24 #
用原生html写一个三角形
最新发布
07-01
在前端开发中，使用HTML和CSS可以非常灵活地创建各种形状的三角形，而无需依赖图像资源。以下是几种常见的实现方式，涵盖不同方向的三角形及其基本原理。 ### 创建向上的三角形 通过设置元素的宽度和高度为0，并利用边框属性来构造一个三角形： ```css .triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } ``` 上述代码通过将左边和右边的边框设为透明，仅保留底部边框为红色，从而形成一个向上的三角形。 ### 创建向下的三角形 类似地，如果希望创建一个向下的三角形，则需要调整边框的方向： ```css .triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid blue; } ``` 这里将顶部边框设为蓝色，而左右边框保持透明，形成一个向下的三角形。 ### 创建向左或向右的三角形 对于左右方向的三角形，可以通过调整边框的方向来实现： - **向左的三角形**：将顶部和底部边框设为透明，右侧边框设为所需颜色。 - **向右的三角形**：将顶部和底部边框设为透明，左侧边框设为所需颜色。 ```css .triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 100px solid green; } .triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 100px solid yellow; } ``` ### 应用场景 这些三角形常用于网页中的提示箭头、下拉菜单指示器、对话框的指向符号等。由于它们是纯CSS实现，因此易于维护和响应式设计适配[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值