CSS应用之画三角形（等腰、直角、正三角形）和提示框

最新推荐文章于 2024-04-23 14:33:07 发布

Freya_yyy

最新推荐文章于 2024-04-23 14:33:07 发布

阅读量1.9k

点赞数 1

分类专栏： HTML&CSS 文章标签：用CSS画三角形用CSS画提示框 CSS画正三角形用CSS画等腰直角三角形

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Freya_yyy/article/details/81269739

版权

HTML&CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.用CSS实现一个三角形：

原理：为一个宽高均为100px的元素设置border-width为100px的边框，每条边框设置不通的border-color。其结果如下图所示，中间的空白区域即为宽高均为100px的元素，其四周表框呈现不同颜色的梯形。

当我们将元素的宽高均设置为0时，边框四个方向的梯形会向着中心位置压缩为三角形，如下图所示，那我们将某三个方向的边框颜色设置为透明色，是不是剩余显示的一个边框就是一个三角形呢？

实现：需要把元素的宽度、高度设置为0，然后为其设置边框。需要哪个边框设置哪个边框的颜色，相邻边框的border-color颜色设置为transparent，对应边框可以设置color为transparent也可以不设置。代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用CSS画三角形</title>	
<style>
.triangle {
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-right: 20px solid transparent;
	border-left: 20px solid transparent;
	border-bottom: 20px solid #ff0000;
} 
</style>
</head>
<body>
<div class="triangle">
</div>
</div>	
</body>
</html>

效果如下：

1.1用CSS实现一个提示框：

先设置好边缘框，再画一个三角形定位在边缘框上，再画一个白色三角形，调整其定位使其覆盖掉前面三角形的某一边。代码如下：

<style>
 .triangle {
    position: relative;
    width: 100px;
    height: 50px;
    border: 1px solid #5b5b5b;
    border-radius: 5px;
    }
.triangle:before {
    position: absolute;
    content: "";
    top: -10px;
    left: 20px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #5b5b5b;
    }
/* 设置白色三角形 */
 .triangle:after {
 	position: absolute;
 	content: "";
       /* 适当减小几个像素 */
 	top: -9px;
 	left: 20px;
 	border-left: 10px solid transparent;
 	border-right: 10px solid transparent;
 	border-bottom: 10px solid #fff;     
 }
</style>
</head>
<body>
<div class="triangle"></div>
</body>

效果如下：

2.用CSS实现一个等边三角形：

上面实现的三角形是一个等腰三角形，那如何画出一个等边三角形？根据各个边之间的长度关系，我们易知：需要展示的边框的宽度：相邻的透明的边框的宽度=

代码如下：

.triangle{
	width: 0px;
	height: 0px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;;
	border-top: 17.32px solid transparent;
	border-bottom: 17.32px solid red; 
}

效果如图所示：

3.用CSS实现一个等腰直角三角形：

将直角三角形的两个直角边对应的框框方向的边框的颜色设置为不透明的

代码如下：

.triangle{
	width: 0px;
	height: 0px;
	border-left: 20px solid red;
	border-right: 20px solid transparent;;
	border-top: 20px solid transparent;
	border-bottom: 20px solid red; 
}

效果如图所示：

如果我们设置不同的颜色则很容易看出原理：

Freya_yyy

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
CSS应用之画三角形（等腰、直角、正三角形）和提示框

1.用CSS实现一个三角形：需要把元素的宽度、高度设置为0，然后为其设置边框。需要哪个边框设置哪个边框的颜色，相邻边框的颜色设置color为transparent，对应边框可以设置color为transparent也可以不设置。代码如下：<!DOCTYPE html><html><head><meta http-equiv="Content...
复制链接

扫一扫