首页 » 技术分享 » CSS做等边三角形

CSS做等边三角形

　
评论关闭　1,256次浏览

这里我列举的两种方法：一种用边框也就是border实现（比较简单）另一种是用五个div旋转溢出隐藏实现

一、用border

在我们平常使用边框的时候往往是一个很窄的边框，所以在视觉效果上边框看似为直线，事实呢？

给一个小的盒子加一个很宽的边框，如下：

html代码：

<div id="triangle"></div>

css代码：

#triangle{
		margin:0 auto;

		width: 20px;
		height: 20px;
		border-left: 173.2px solid red;
		border-top: 100px solid blue;
		border-right: 173.2px solid green;
		border-bottom: 100px solid black;
	}

可以明显的看出其实并不是像想的那样边框是直线或者矩形。其实它是体型滴~

下面我们去掉盒子的宽度（都变为0），css如下：

#triangle{
		margin:0 auto;

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

 

由四个三角形组成的矩形就出来了。。。如果我们想要三角形只需要把其中的三个三角形（即边框）的颜色变为透明即可

 

#triangle{
		margin:0 auto;

		width: 0px;
		height: 0px;
		border-left: 173.2px solid transparent;
		border-top: 100px solid transparent;
		border-right: 173.2px solid green;
		border-bottom: 100px solid transparent;
	}

三角形出来了。。。

而三角形的角度只需要通过调节边框的长度即可控制，具体多少就是简单的数学问题

了（三角函数，勾股定理。。）

上述例中长度大概按 1 : 2 : 1.732 来就是正三角形了

如果看着不舒服或者要求需要可以用 transform：rotate（指定角度）；旋转即可

二、用五个div

<div class="d1">
    <div class="d2">
        <div class="d3">
            <div class="d4">
                <div class="d5"></div>
            </div>		
        </div>
    </div>
</div>
.d1,.d2,.d3,.d4,.d5{
			width: 200px;
			height: 200px;
			overflow: hidden;
			position: absolute;
		}
		/*d1与d4位置重合*/
		.d1{
			left:50%;
			top: 20%;
			border: 1px solid pink;
			transform: rotate(30deg);
			transform-origin:200px 200px;
		}
		.d2{
			transform: rotate(-30deg);
			transform-origin:0 200px;
			/*background: blue;*/
		}
		.d3{
			transform: rotate(-30deg);
			transform-origin:200px 200px;
			border: 1px solid red;
			background: red;
		}
		.d4{
			border: 1px solid green;
			background: green;
			transform: rotate(-30deg) ;
			transform-origin:200px 0;

		}
		.d5{
			border: 1px solid black;
			background: black;
			transform: rotate(-30deg) ;
			transform-origin:0 0;
		}

在没有设置溢出隐藏时：

然后 加上overflow：hidden：

这个超麻烦。。还是border吧，自己玩玩还可以

转载自原文链接, 如需删除请联系管理员。

原文链接：CSS做等边三角形，转载请注明来源！

赞 0