网页——画一个三角形

有参照别人的代码，写一下自己的理解。这是给自己的一个记录~

这个方法主要是对css-border 的理解以及运用。主要利用就是两个内嵌的正方形之间产生的形状

依据图形：

代码：

css：

<style type="text/css">.triangle {height:20px; width:20px; border-top:50px solid red;border-bottom:50px solid blue;border-right:50px solid green;border-left:50px solid yellow;}</style>

html:

<div class="triangle"></div>

代码中的height和width都是对小正方形设值的。大正方形的边长为120px*120px

由上面这个图形可以看到两个正方形和4个等边梯形，要想有一个三角形，可以很自然的想到让小正方形的边长变为0。

得到的图形：

注意写法： height:0px; width:0px; 或者height:0; width:0;

如果写成：height:; width:;或者直接不写这两个，图形会变成下面这样的形状。

我们得到了4个小三角形，但是我们只需1个，所以很容易就想到把其他三个隐形掉。

以得到上面的红色三角形为例：

html的代码不变

改变css代码：

<style type="text/css">.triangle {height:0;width:0;border-top:50px solid red;border-bottom:50px solid transparent;border-right:50px solid transparent;border-left:50px solid transparent;}</style>

得到：

代码中 border-bottom的语句其实可以直接删去，因为right和left的图形已经可以很好的限制top的图形。

最终css的代码：

利用对border四边的颜色及中间四边形的变形，可以变换出各种梯形以及三角形。

<style type="text/css">.triangle {height:0;width:0;border-top:50px solid red;border-right:50px solid transparent;border-left:50px solid transparent;}</style>

网页——画一个三角形相关推荐

[html] 使用svg画一个三角形
[html] 使用svg画一个三角形效果 Screen Shot 2020-11-13 at 14 39 20 说明 svg 定义svg元素 viewBox 定义svg的画布大小,0 0 100 1 ...
D3D11_Chili_Tutorial（2）：画一个三角形
文章目录 11:D3D初始化篇-- COM(Component Object Model) 12:D3D架构 / 交换链 13:初始化设备 14:调试层 15:智能指针 16:画一个三角形(上集) 1 ...
python画长方形的代码_python使用turtle画一个三角形、正方形（矩形或四边形）
今天我们用python使用turtle库画一个三角形.一个正方形. 1.画一个三角形. 实现方法是先画一个直线,然后旋转120度,然后继续画直线.这样反复画三条直线后,就形成一个等边三角形.先看效果: ...
【Vulkan学习记录-基础篇-1】用Vulkan画一个三角形
好久没有更新过博客了,上半年一直忙着找实习的事情,不过现在已经入职一段时间了,也可以抽出时间来继续整理一些内容,所以最近会尽量变得勤快一点来写博客. Vulkan是新一代的图形API,具有跨平台.高性 ...
使用CSS画一个三角形
效果图全部代码 <!DOCTYPE html> <html> <head><title></title><style type=&q ...
[css] CSS画一个三角形，CSS绘制空心三角形
1.不同理解的边框 <div class="border"></div> .border {width: 50px;height: 50px;border: ...
python使用turtle画一个三角形、正方形（矩形或四边形）
今天我们用python使用turtle库画一个三角形.一个正方形. 1.画一个三角形. 实现方法是先画一个直线,然后旋转120度,然后继续画直线.这样反复画三条直线后,就形成一个等边三角形.先看效果: ...
用css画一个三角形
用css画一个三角形 HTML: <div id="delta"></div> CSS: #delta{width: 0;height: 0;border- ...
如何用CSS画一个三角形？
hello,大家好,最近在看前端的八股,里面有这样一道题,如何用CSS画出三角形?我想以这个题为例,仔细讲一下这个题的技巧,以及对这道题拓展一下,即如何画出圆形和椭圆形? 首先,如何用CSS画一个三角 ...

网页——画一个三角形

网页——画一个三角形相关推荐

最新文章

热门文章