一.新建一个index.html和index.css文件

二.打开index.html写入以下代码

<!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><link rel="stylesheet" href="./index.css"> <!-- 引入index.css -->
</head>
<body><div class="all"><div class="triangle1"></div><div class="triangle2"></div><div class="triangle3"></div><div class="triangle4"></div><div class="triangle5"></div><div class="triangle6"></div><div class="triangle7"></div><div class="triangle8"></div></div>
</body>
</html>

三.打开index.css写入以下代码

.all{display: flex;justify-content: space-around;
}.triangle1 {border-bottom: 40px solid red;border-right: 20px solid transparent;border-left: 20px solid transparent;width: 0px;height: 0px;
}.triangle2 {border-bottom: 40px solid transparent;border-right: 40px solid red;width: 0px;height: 0px;
}.triangle3 {border-top: 40px solid red;border-right: 20px solid transparent;border-left: 20px solid transparent;width: 0px;height: 0px;
}.triangle4 {border-top: 40px solid transparent;border-left: 40px solid red;width: 0px;height: 0px;
}.triangle5 {border-top: 40px solid red;border-right: 40px solid transparent;width: 0px;height: 0px;
}.triangle6 {border-left: 40px solid transparent;border-bottom: 40px solid red;width: 0px;height: 0px;
}.triangle7 {border-left: 40px solid red;border-bottom: 20px solid transparent;border-top: 20px solid transparent;width: 0px;height: 0px;
}.triangle8 {border-right: 40px solid red;border-bottom: 20px solid transparent;border-top: 20px solid transparent;width: 0px;height: 0px;
}

四. 这样我们就可以看见一个三角形

怎么用CSS实现三角形？相关推荐

css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码:/* create an arrow that points up */ div.arr ...
纯 CSS 实现三角形尖角箭头的实例
为什么80%的码农都做不了架构师?>>> 上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/ ...
06. 用css实现三角形
用css实现三角形 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
html css右下角三角形,纯CSS绘制三角形（各种角度）
CSS/HTML 的纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
css 绘制三角形_解释CSS形状：如何使用纯CSS绘制圆，三角形等
css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...
html div三角形,【div】纯CSS绘制三角形
原标题:[div]纯CSS绘制三角形我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使 ...
css空心三角形_（12）把“可以动的盒子”更优雅地展示： “伪元素”妙用 | CSS...
原创:itsOli @前端一万小时本文版权归作者所有,未经授权,请勿转载! 本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 1. 如何使用伪元素来清除浮动 ...
html css拖拽设计,css绘制三角形和 HTML拖拽事件
利用css制作三角形利用设置边框的三个边的长度和border实现三角形设置,并隐藏其他边例子:#yz3{ display: inline-block; 0; height: 0; border-t ...
制作京东快递查询 css制作三角形
这是我学习前端道路上制作的一个小案例,想把这些记下来,记录我的学习经历和更加熟练的掌握代码..这个案例是当我们在下面输入数字时上面的盒子会放大的显示出来,效仿的是京东快递查询单号.好了,废物不多说,上 ...
纯CSS实现三角形图标
纯Css实现三角形.气泡框的三角形 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rWU68bRK-1647095723236)(C:\Users\zwz\AppDat ...

怎么用CSS实现三角形？

怎么用CSS实现三角形？

一.新建一个index.html和index.css文件

二.打开index.html写入以下代码

三.打开index.css写入以下代码

四. 这样我们就可以看见一个三角形

怎么用CSS实现三角形？相关推荐

最新文章

热门文章