用CSS实现三角形及其原理

文章目录

盒子模型
原理
- 各边边框宽度相同
- - 有内容的盒子
  - 去掉某一边的边框
  - 去掉内容
- 各边边框不尽相同
- - 有内容的盒子
  - 去掉某一边的边框
  - 去掉内容
三角形

盒子模型

首先要充分了解盒子模型的构造

原理

各边边框宽度相同

有内容的盒子

在这里CSS样式中的width和height是内容的宽度和高度

<style>div {width: 40px;height: 40px;border-top: 20px solid #000;border-right: 20px solid red;border-left: 20px solid blue ;border-bottom: 20px solid greenyellow;}
</style>
<body><div></div>
</body>

图示如下：

去掉某一边的边框

这里以去掉下部分边框为例，其它类似

<style>div {width: 40px;height: 40px;border-top: 20px solid #000;border-right: 20px solid red;border-left: 20px solid blue ;}
</style>
<body><div></div>
</body>

图示如下：

去掉内容

去掉内容就是把width和height都置为0，可以看出上下左右边框各为一个三角形

<style>div {width: 0px;height: 0px;border-top: 20px solid #000;border-right: 20px solid red;border-left: 20px solid blue ;border-bottom: 20px solid greenyellow;}
</style>
<body><div></div>
</body>

图示如下：

<style>div {width: 0px;height: 0px;border-top: 20px solid #000;border-right: 20px solid red;border-left: 20px solid blue ;}
</style>
<body><div></div>
</body>

图示如下：

各边边框不尽相同

有内容的盒子

各个边框宽度不同

<style>div {width: 40px;height: 40px;border-top: 20px solid #000;border-right: 30px solid red;border-left: 40px solid blue ;border-bottom: 50px solid greenyellow;}
</style>
<body><div></div>
</body>

图示如下：

去掉某一边的边框

这里以去掉下部分边框为例，其它类似

<style>div {width: 40px;height: 40px;border-top: 20px solid #000;border-right: 30px solid red;border-left: 40px solid blue ;}
</style>
<body><div></div>
</body>

图示如下

去掉内容

去掉内容就是把width和height都置为0，可以看出上下左右边框各为一个三角形

<style>div {width: 0px;height: 0px;border-top: 20px solid #000;border-right: 30px solid red;border-left: 40px solid blue ;border-bottom: 50px solid greenyellow;}
</style>
<body><div></div>
</body>

图示如下

<style>div {width: 0px;height: 0px;border-top: 20px solid #000;border-right: 30px solid red;border-left: 40px solid blue ;}
</style>
<body><div></div>
</body>

图示如下

三角形

将要展示的三角形设置为某一颜色，其它各个边框的颜色设置为透明（transparent）

<style>div {width: 0px;height: 0px;border-top: 20px solid #000;border-right: 20px solid red;border-left: 20px solid blue ;border-bottom: 20px solid greenyellow;}#div1 {width: 0px;height: 0px;border-top: 20px solid #000;border-right: 20px solid transparent;border-left: 20px solid transparent;border-bottom: 20px solid transparent;}#div2 {width: 0px;height: 0px;border-top: 20px solid transparent;border-right: 20px solid red;border-left: 20px solid transparent;border-bottom: 20px solid transparent;}#div3 {width: 0px;height: 0px;border-top: 20px solid transparent;border-right: 20px solid transparent;border-left: 20px solid blue;border-bottom: 20px solid transparent;}#div4 {width: 0px;height: 0px;border-top: 20px solid transparent;border-right: 20px solid transparent;border-left: 20px solid transparent;border-bottom: 20px solid greenyellow;}
</style>
<body><div id="div1"></div><div id="div2"></div><div id="div3"></div><div id="div4"></div><div></div></body>

图示如下

用CSS实现三角形及其原理相关推荐

5、css画三角形？原理是什么？
简介 css画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四部: 设置一个盒子设置四周不同颜色的边框将盒子的宽高设置为0,仅保留边框得到四个三角形,选择其中一个后,其他三角形(边框)设 ...
纯css实现三角形--详细原理
利用css可以实现各种样式的三角形实现效果代码如下: <head><meta charset="UTF-8"><title>css实现三角形 ...
CSS画三角形及其原理
搜索网络之后发现三角形可以通过以下CSS代码实现: #triangle_bottom{ height:0px; width:0px; border-left:20px solid transparen ...
CSS绘制三角形的原理剖析
今天学习Bootstrap时候,看到按钮的向下三角形源码: .caret {display: inline-block;width: 0;height: 0;margin-left: 2px;vert ...
CSS实现三角形的原理
盒模型上下左右边框交界处呈现平滑的斜线,利用这个特点,通过设置不同的上下左右边框宽度或者颜色可以得到小三角,小梯形等.调整宽度可以调节三角形形状. #test {height:0;width:0;bo ...
CSS绘制三角形原理及应用
更多精彩内容可以访问我的博客Aelous-BLog 在从 PSD 到 HTML 页面的过程中,免不了要遇到一个问题:"这个小图标,可以用 CSS 效果实现,也可以切图下来,到底该怎么选择呢? ...
CSS 如何画一个三角形？原理是什么？
css 画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四步: 1.设置一个盒子 2.设置四周不同颜色的边框 3.将盒子宽高设置为 0,仅保留边框 4.得到四个三角形,选择其中一个后,其他三角 ...
CSS实现三角形原理及过程
CSS实现三角形原理及过程在开发中,遇到很多的列表都需要用到三角形的箭头,可以直接用一个图片作背景铺垫,但这样占用一定的内存,对于这种简单的图形纯CSS也能实现,它占用的内存相对图片较小,所以相比而 ...
HTML之CSS画三角形原理
在进行WEB应用开发的过程中,我们经常会需要使用到三角形图标,例如下面这个下拉选择控件右侧的收缩箭头. 又或者像下面这种情形. 搜索网络之后发现三角形可以通过以下CSS代码实现: #triangle_ ...

用CSS实现三角形及其原理

文章目录

盒子模型

原理

各边边框宽度相同

有内容的盒子

去掉某一边的边框

去掉内容

各边边框不尽相同

有内容的盒子

去掉某一边的边框

去掉内容

三角形

用CSS实现三角形及其原理相关推荐

最新文章

热门文章