利用css 画三角形

1.先画一个正方形

2.在定义4条边框，你想那个三角形朝哪个方向就给那条边框定义颜色，其余边框颜色设置透明。

transparent ：透明

<!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>.jiang{height: 0px;width: 0px;/* background: green; */border-bottom: 100px solid greenyellow;border-top: 100px solid transparent;border-left: 100px solid transparent;border-right: 100px solid transparent;}</style>
</head>
<body><!-- 1。绘制大小的正方形 --><div class="jiang"></div></body>
</html>

利用css 画三角形相关推荐

如何利用CSS画三角形、圆形、柠檬、小药丸?
一.用边框线画出三角形方法: 1.盒子边框全设为0 2.把不要的边框线颜色设为透明 .box { border-left: 30px solid transparent; border-right: ...
【前端：css画三角形】
网上也有各种各样用CSS样式来写三角形的文章,但个人觉的有些乱,本来可能就不明白如何写,可能看完之后和没看是没什么区别的.因此本人在这里写好了方法,希望可以帮助的刚入门的前端工作者 .box{widt ...
css画三角形(怎么用css画三角形)
如何用css3画一个有边框的三角形如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. ...
前端之使用CSS画三角形
在网页中如果需要一个三角形的图标,这时如果使用图片或字体图标可能会过于麻烦,这时候,利用CSS也可以轻松解决这个问题: 1.利用CSS画直角等腰三角形想要使用css画三角形,首先需要定义一个没有宽度 ...
5、css画三角形？原理是什么？
简介 css画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四部: 设置一个盒子设置四周不同颜色的边框将盒子的宽高设置为0,仅保留边框得到四个三角形,选择其中一个后,其他三角形(边框)设 ...
css画三角形和箭头
css画三角形: 使用 CSS 绘制三角形的第一种方法就是使用「border」属性. 给定一个宽度和高度都为 0 的元素,其 border 的任何值都会直接相交,我们可以利用这个交点来创建三角形. ...
利用css画三角箭头图标
利用css画三角箭头图标方式单独设置正方形的两条相邻的边框,通过transform的rotate属性值旋转实现箭头图标(注意单位为deg) div {width: 50px;height: 50px ...
用html和css画太极图,利用css画一个太极图(阴阳八卦)实例
这篇文章介绍利用css画一个太极图(阴阳八卦)实例 #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red ...
css画直角三角形,关于CSS画三角形的那些事
用CSS画一个三角形,是不难的问题,但我却掌握的不够熟练,例如当要求为画一个直角三角形或者等腰三角形,我就有点反应不过来.所以,在这篇中点透它,以后再见,不含糊. 原理分析用CSS画三角形,实际上就 ...

利用css 画三角形

利用css 画三角形相关推荐

最新文章

热门文章