CSS三角形的原理

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS三角形的原理相关的知识,希望对你有一定的参考价值。

如题。

1、当如下设置代码并赋给div相应的属性时:

#sider2

    width: 100px;

    height: 100px;

    border-top: 30px solid #000;

    border-right: 30px solid #ff0000;

    border-left: 30px solid #00ff00;

    border-bottom: 30px solid #0000ff;

会得到如下的一张图:

2、接着当不设置border-bottom,即默认其为0时,可以得到下面的图片;

3、然后当设置其width为0时,如下图:

4、继续设置其height为0;

5、最后假若你把border-left,border-right设置为透明之后,就可以看到如下的三角形了。

6、这就是设置一个基本的三角形所需要的代码,效果也看起来很直观。

7、还有假如是想实现一个直角三角形,则最后需要两个border边的配合使用,浏览器会自动进行一些“拉伸变换”后就可以得到一个直角三角形。

#triangle-topleft

    width: 0;

    height: 0;

    border-top: 100px solid red;

    border-right: 100px solid transparent;

   

 

参考技术A 我还真没看懂些那么一大串样式就为了一个三角形干嘛的,但如果你要为了理解三角形原理还不如看这段代码。
<html>
<head>
<title>三角形</title>
<style tpye="text/css">
div

width:0px;
height:0px;
border-top: 8px solid transparent;
border-right: 8px solid #1c7ecf ;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;

</style>
</head>
<body>
<div></div>
</body>
</html>
这个div是由4个三角形组成,每个三角对应一个border,隐藏其它3个border,就可以得到一个三角形。
参考技术B 题何处

css制作三角形的原理是啥?

也是初次接触html,在网上找了下教程,但是不明白三角形的原理是什么?

还有border的三要素(border-width、border-color、border-style)又是如何运用的?我看好像有什么border-style:啥啥啥的;←_←

均分原理
在矩形的直角,两条边的样式要均分
比如左上角 border-top 和 border-left 的样式要均分
如果border-left 无色透明, border-top有色, 就会出来一个45度的锐角追问

网易云课堂那个教程一点基础都不教,什么叫样式和均分……→_→
另外这个我是在网上找的,云课堂教的是,宽高为0,然后三个边框变白……

追答

样式也就是每一条CSS规则
均分原理是为了好记给起的名字
每个box(盒子)都有4条边(border ),而且边都是有宽度的
边可以设置的样式大概有三条 border-width (宽) border-color(颜色) border-style(虚线啊还是点啊还是实线)
而box的角会被两条边的样式作用,因为你不能说左上角只属于左边,不属于上边
所以沿对角线平分,每边各占一个45度的锐角

参考技术A 1.div+css画三角形代码原理采用的是均分原理。
2.在矩形的直角,两条边的样式要均分,比如左上角 border-top 和 border-left 的样式要均分
如果border-left 无色透明, border-top有色, 就会出来一个45度的锐角。

以上是关于CSS三角形的原理的主要内容,如果未能解决你的问题,请参考以下文章

CSS三角形的原理

CSS - 制作三角形

CSS画三角形的原理

利用CSS border实现三角形图标效果及原理解释

Web前端面试指导(十八):用纯CSS创建一个三角形的原理是什么?

css_画一个三角形