用html,css制作一个三角形

最新推荐文章于 2024-08-12 10:59:58 发布
最新推荐文章于 2024-08-12 10:59:58 发布
阅读量2.4w 收藏 10
点赞数 2
分类专栏： 前端WEB 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjgyb37/article/details/78238893
版权

用html,css制作一个三角形。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三角形</title>
    <style>
        .triangle {
            width: 0;
            height: 0;
            border: 40px solid red;
            border-top-color: black;
            border-bottom: none;
            border-left-color: transparent;
            border-right-color: transparent;
        }
    </style>
</head>
<body>
    <div class="triangle">
    </div>
</body>
</html>

最后的效果：

zjgyb37
关注
专栏目录
用html+css制作一个简易的三角形^_^（还会把以往制作圆形的代码分享给大家）
m0_69057208的博客
05-03 1453
万物皆有形状，在以往的文章中我在写的过程中制作了许多次的圆形，我就在想，用html是不是还可以制作许多的其他的图形形状？答案是可以的。我在学习过程中，学到了如何制作简易的三角形，今天给大家分享一下。（还有圆形） 第一步：建立相应的文件夹，并创建空白html5的模板。 第二步：开始制作三角形。 1、创建一个空白的区域（使其的高和宽都为0） html代码： <div id="delta"></div> css代码： #delta{ width:0; .
用CSS制作三角形和按钮的简单实例
12-13
本文将详细讲解如何使用CSS制作三角形和按钮的实例。 首先，我们来探讨如何用CSS制作三角形。这个技巧是利用了边框（border）的特性。在HTML中创建一个没有宽高（width和height为0）的元素，然后给它设定不同的边框...
用css画三角形
04-10
用纯css绘制三角形，不是用图片
用css画一个三角形
Floatwor青舟的博客
03-27 875
怎么用css画一个三角形呢？ △ 1、思路是使用border边框来实现三角形的样式，因为border的边框是由四个三角形组成的。 2、首先创建一个带边框的div <body> <style> #triangle { width: 50px; height: 50px; border: 20px solid; border-color: blue red green greenyellow; } </styl
【css】使用css画一个三角形
最新发布
weixin_43444977的博客
08-12 314
width和height设置为0，四个border，把三个border设置为transparent；
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和html写一个三角形
weixin_48727085的博客
07-14 255
```javascript ```css <!DOCTYPE HTML> <html lang = "en"> <head> <meta charset = "UTF-8"/> <style> .box{ width:60px; height:0px; border:1px solid black } .a{ transform:translateY(9px) rotate(25deg.
HTML制作三角形
阿牛哥的博客
09-06 1652
HTML制作三角形
一波CSS制作的三角形和圆形小按钮示例
01-19
参考了天猫、微博等网站的做法，用纯html和css实现，效果还是不错的。以下是成果，兼容主流浏览器，包括ie6。 CSS Code复制内容到剪贴板 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN ...
CSS制作箭头图标代码(圆，三角形，椭圆)
09-24
使用CSS3，我们可以实现更多样式上的创新，其中包括使用CSS制作各种图形，如箭头图标。利用CSS3的特性，我们可以抛弃传统的图片图标，转而使用纯CSS代码来创建圆、椭圆和三角形等基本几何图形。 首先，我们来讨论...
html+css实现三角形
Shivy_的博客
01-30 504
介绍 通过 html + css , 实现不同方向的三角形 效果图 需求背景 现在经常会发现很多网页上的导航, 分类页等页面, 都会使用一个三角符号去指向内容，效果简洁美观 ; 并且现在很多的前端面试中, 也会问到怎么在网页当中实现一个三角的符号，所以自己做了, 各个方向的三角符号, 记得收藏哦~ 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met
CSS画三角形
qingemengyue的博客
08-13 360
1.利用border-top，border-bottom，borderleft，border-righthttp://www.jb51.net/article/42513.htm#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px soli
css 画三角形
weixin_43915401的博客
02-23 257
利用border属性画三角形 1 border长什么样 div{ width: 20px; height: 20px; border-top: 70px solid red; border-left: 70px solid beige; border-bottom: 70px solid greenyellow; border-right: 70px solid blueviolet; } 1.1 放大border之后，可以看到每条border近似于三角形，
css空心三角形_纯CSS+HTML制作三角形和圆|实心+空心
06-03
您好！关于制作纯CSS的空心三角形和圆，可以参考以下代码示例： 空心三角形： ``` <div class="triangle"></div> <style> .triangle { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid #000; } </style> ``` 实心三角形： ``` <div class="triangle"></div> <style> .triangle { width: 0; height: 0; border-top: 50px solid #000; border-right: 50px solid transparent; border-left: 50px solid transparent; } </style> ``` 空心圆： ``` <div class="circle"></div> <style> .circle { width: 50px; height: 50px; border: 2px solid #000; border-radius: 50%; } </style> ``` 实心圆： ``` <div class="circle"></div> <style> .circle { width: 50px; height: 50px; background-color: #000; border-radius: 50%; } </style> ``` 希望对您有帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值