前言

使用html+CSS绘制三角形,三角形经常出现，如下是绘制三角形教程

一、绘制正方形

<!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 type="text/css">.box{width: 50px;height: 50px;background-color: red;}</style>
</head>
<body><div class="box"></div><!--盒子-->
</body>
</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><style type="text/css">.box{width: 50px;height: 50px;background-color: red;border-top: 50px solid blue;border-left: 50px solid rgb(69, 69, 79);border-right: 50px solid rgb(17, 17, 20);border-bottom: 50px solid rgb(86, 141, 38);}</style>
</head>
<body><div class="box"></div><!--盒子-->
</body>
</html>

三、把盒子的宽高设置为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 type="text/css">.box{width: 0px;height: 0px;border-top: 50px solid blue;border-left: 50px solid rgb(69, 69, 79);border-right: 50px solid rgb(17, 17, 20);border-bottom: 50px solid rgb(86, 141, 38);}</style>
</head>
<body><div class="box"></div><!--盒子-->
</body>
</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><style type="text/css">.box{width: 0px;height: 0px;border-top: 50px solid blue;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 50px solid transparent;}</style>
</head>
<body><div class="box"></div>
</body>
</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><style type="text/css">.box{width: 0px;height: 0px;border: 50px solid transparent;border-top: 50px solid blue; /* 要哪边三角形就设置哪边*/}</style>
</head>
<body><div class="box"></div>
</body>
</html>

最终样式如下：

使用html+CSS绘制三角形相关推荐

css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码:/* create an arrow that points up */ div.arr ...
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绘制三角形图标
CSS绘制三角形图标目录 1CSS绘制三解形图标原理 2 页面效果 3 HTML结构 4 CSS样式 1CSS绘制三解形图标原理对内容容器进行相对定位,对内容容器的伪元素:before和:after ...
三角形css_使用css绘制三角形
好看的前端网页大家见到的应该都不少但是很多都是用图片作为背景今天我们就给大家讲讲怎么用css绘制图形 (图形如下) ---------------------------------------- ...
CSS：N种使用CSS 绘制三角形的方法
目录 6种使用 CSS 实现三角形的技巧 1.使用 border 绘制三角形 2.使用 linear-gradient 绘制三角形 3.使用 conic-gradient 绘制三角形 4.transf ...
CSS绘制三角形原理及应用
更多精彩内容可以访问我的博客Aelous-BLog 在从 PSD 到 HTML 页面的过程中,免不了要遇到一个问题:"这个小图标,可以用 CSS 效果实现,也可以切图下来,到底该怎么选择呢? ...
CSS 绘制三角形的方法
目录 1.使用 border 绘制三角形 2.使用 linear-gradient 绘制三角形 3.使用 conic-gradient 绘制三角形 4.transform: rotate 配合 ove ...

使用html+CSS绘制三角形

使用html+CSS绘制三角形

前言

一、绘制正方形

二、进行外边框填充

三、把盒子的宽高设置为0

四、要哪边的三角形就把哪边设置为透明

五、最终化简代码

使用html+CSS绘制三角形相关推荐

最新文章

热门文章