CSS绘制三角形

绘制三角形关键在于控制盒子模型的border属性。

<!DOCTYPE html>
<html>
	<style>
		#triangle-origin{
            width:0;
            height:0;
            margin:10px auto;
            border:50px solid transparent;
            border-color:black blue red wheat;
        }
	</style>
    <body>
        <div class="site-up">这就是向上指的小三角形 <b> </b> </div>
        <hr>
        <div class="site-down">这就是向下指的小三角形 <b> </b> </div>
        <hr>
        <div id="triangle-origin"></div>
        <hr>
        <div id="triangle-down"></div>
        <hr>
        <div id="triangle-up"></div>
        <hr>
        <div id="triangle-right"></div>
        <hr>
        <div id="triangle-left-top"></div>
    </body>
</html>

盒子模型，给四个border染色
image

某一个方向的border宽度为0

向下的三角形：

#triangle-down{
	width:0;
	height:0;
	margin:10px auto;
	border-bottom: 0;
	border-right: 50px solid white;
	border-left: 50px solid white;
	border-top:100px solid orange;
}

向上的三角形：

#triangle-up{
	width:0;
	height:0;
	border-top: 0;
	border-right: 50px solid white;
	border-left: 50px solid white;
	border-bottom:100px solid orange;

	margin:10px auto;
}

向右的三角形：

#triangle-right{
	width:0;
	height:0;
	border-right: 0;
	border-top: 50px solid white;
	border-left: 100px solid orange;
	border-bottom:50px solid white;

	margin:10px auto;
}

向左上的三角形：

#triangle-left-top{
	width:0;
	height:0;
	border-right: 50px solid white;;
	border-top: 50px solid orange;
	border-left: 50px solid orange;
	border-bottom:50px solid white;

	margin:10px auto;
}

小结：

  1. 设置conten区宽高为0
  2. 上下左右，顶角在哪个方向，哪个方向的border宽度就设为0
  3. 左上、左下、右上、右下，其实就是两个三角形的组合

放在一段文字之后：

.site-down {
	width:auto;
	height:auto;
	background-color:#fff;
	position:relative;
}
.site-down b {
	width:0;
	height:0;
	margin:10px auto;
	border-bottom: 0;
	border-right: 4px solid white;
	border-left: 4px solid white;
	border-top:6px solid orange;
	position:absolute;
}

取盒子模型中四个三角形的一个

向上的三角形

.site-up {
	width:auto;
	height:auto;
	background-color:#fff;
	position:relative;
}
.site-up b {
	border-color: #fff #fff #666;;
	border-style: solid;
	border-width: 4px;

	position:absolute;
	top:3px;
}

小结：
由四个等腰三角形组成矩形盒子，把不需要的三角形设为和背景一样的颜色即可。因为所需要的向上三角形是很小的，所以实际的染黑部分未必是三角形，即使梯形，缩小后也会呈现三角形的样子。（可以通过增大border-width的值看到）

image
谢谢阅读！

posted @ 2021-06-08 15:46  叶际参差  阅读(146)  评论(0)    收藏  举报