利用border制作三角形原理

网站前端页面中，有时候会使用一些三角形，除了使用图片的方式之外，利用css的border属性也可以做出相对应的三角形。那么，利用border是如何实现三角形的制作的呢？

先看下面一个例子：

CSS代码：

  width:100px;
height:100px;
border-top: solid 100px blue;
border-left: solid 100px black;
border-right: solid 100px yellow;
border-bottom: solid 100px red;

运行结果：

通过显示的结果可以看到边框的相交的地方都形成45°平分，那么，当元素的宽高都设置为0的时候会是什么样子呢？

代码：

  width: 0;
height: 0;
border-top: solid 100px blue;
border-left: solid 100px black;
border-right: solid 100px yellow;
border-bottom: solid 100px red;

运行结果：

这样，我们就看到了四个等边的三角形。那么，我们想要的是一个三角形，该怎么办呢？试想一下，假如我们去除一条边之后，会变成什么样子呢？

代码：

  width: 0;
height: 0;
border-left: solid 100px black;
border-right: solid 100px yellow;
border-bottom: solid 100px red;

运行结果：

这次，我们看到了三个三角形，假如我们把黑色和黄色都换成透明的会不会就剩下一个红色的等边三角形了呢？

代码：

  width: 0;
height: 0;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
border-bottom: solid 100px red;

运行结果：

很显然，三角形出现了。我们可以再试着修改一下border的宽度或者隐藏其他的边，就可以得到不同的三角形了。

代码：

  width: 0;
height: 0;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
border-bottom: solid 50px red;

运行结果：

代码：

  width: 0;
height: 0;
border-top: solid 100px transparent;
border-bottom: solid 100px transparent;
border-left: solid 150px black;

运行结果：

代码：

  width: 0;
height: 0;
border-top: solid 100px transparent;
border-left: solid 150px black;

运行结果：

总结：可以通过移除一条或两条边框，设置相应边框透明，实现三角形的制作，可以变换多样，更多例子不再列举。

利用border制作三角形原理相关推荐

【css】巧用border制作三角形
#css用border制作三角形 1.利用CSS盒模型盒模型上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角调整宽高大小可以调节三角形形 ...
利用css制作三角形
1.首先制作一个正方形只设置边框 2.除了上边框其它边框都设置透明色(transparent) <style>div {width: 100px;height: 100px;border: ...
【前端小技巧】利用border画三角形及梯形
border是围绕元素内容和内边距的一条或多条线,border 属性允许你规定元素边框的样式.宽度和颜色值: border-width 粗细 none/hidden/solid/dashed/dot ...
css border 制作三角形
border 边框上三角是只有上面的border 有颜色,其余的边框都是tranparents,下三角只有下面的border 有颜色,其余的边框都是tranparents,左三角只有左面的bord ...
css中border制作各种形状
css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...
CSS——制作三角形
文章目录前言一.上三角形的制作二.右三角形的制作总结前言本文主要介绍如何利用css制作三角形~ 一.上三角形的制作 1.示例图: 2.方法简介: 1.将宽和高设为0,利用border制作合 ...
html如何把上边角做成椭圆,使用css3的border-radius和border制作半圆、三角、椭圆等各种图形...
自从有了css3,我们可以制作各种各样的图形了,制作圆角也可以不使用图片了,我们可以使用border-radius可以制作圆角,椭圆等图形.下面我们来看一下如何制作这些的(以下例子请在现代高级浏览器浏 ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
h5画三角形_如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...

利用border制作三角形原理

利用border制作三角形原理相关推荐

最新文章

热门文章