CSS三角形的原理

如题。... 如题。展开

 我来答

3个回答

#热议# 为什么有人显老，有人显年轻？

千锋教育
2016-07-28 · 做真实的自己用良心做教育

千锋教育

千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。

向TA提问

关注

展开全部

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;

}

已赞过 已踩过<

评论收起

苏州谭祖自动化科技有限公司_
2024-11-13 广告

苏州谭祖自动化科技有限公司专业提供高速精密分割器，凸轮及其他五金配件。随着现代工业对自动化、高速化、高精度化的日益追求，更可靠的凸轮分度器已成为当今世界上精密驱动的主流装置.它们作为自动化机器的核心传动装置发挥着至关重要的作用。此产品广泛用... 点击进入详情页

本回答由苏州谭祖自动化科技有限公司_提供

匿名用户
2013-08-28

展开全部

我还真没看懂些那么一大串样式就为了一个三角形干嘛的，但如果你要为了理解三角形原理还不如看这段代码。
<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,就可以得到一个三角形。


本回答被网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起