【CSS】使用 CSS 实现三角形 ( 宽高设置为 0 | 设置四个边框宽度 / 样式 / 颜色值 | 兼容低版本浏览器 | 基本示例 | 对话框示例 )

最新推荐文章于 2023-08-21 14:47:29 发布

韩曙亮

最新推荐文章于 2023-08-21 14:47:29 发布

阅读量828

点赞数 2

分类专栏： CSS 文章标签： css html 前端三角形 CSS三角形

本文链接：https://blog.csdn.net/shulianghan/article/details/130218057

版权

CSS 专栏收录该内容

142 篇文章

订阅专栏

文章目录

一、使用 CSS 实现三角形
二、使用 CSS 实现三角形代码示例
三、使用 CSS 实现对话框代码示例

一、使用 CSS 实现三角形

使用 CSS 实现三角形步骤 :

首先 , 宽度 / 高度设置为 0 ;

			/* 宽高设置为 0 像素 */
			width: 0;
			height: 0;

然后 , 设置 4 个边框 , 每个边框都要设置相同的宽度 , 实线 , 以及颜色值 ; 该颜色值就是显示的三角形颜色值 ;

			/* 4 个边框都要设置 如果不需要 */
			border-top: 10px solid blue;
			border-right: 10px solid red;
			border-bottom: 10px solid purple;
			border-left: 10px solid orange;

最后 , 设置低版本浏览器兼容 ;

			/* 兼容低版本浏览器添加的设置 */
			font-size: 0;
			line-height: 0;

二、使用 CSS 实现三角形代码示例

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>CSS 三角形</title>
	<style>
		.box {
			/* 宽高设置为 0 像素 */
			width: 0;
			height: 0;
			
			/* 4 个边框都要设置 如果不需要 */
			border-top: 10px solid blue;
			border-right: 10px solid red;
			border-bottom: 10px solid purple;
			border-left: 10px solid orange;
			
			/* 兼容低版本浏览器添加的设置 */
			font-size: 0;
			line-height: 0;
		}
		
		.box2 {
			/* 宽高设置为 0 像素 */
			width: 0;
			height: 0;
			
			/* 设置 4 个边框的样式 */
			border-style: solid;
			/* 设置 4 个边框的宽度 */
			border-width: 10px;
			/* 设置 4 个边框的颜色
			   都设置成透明
			   如果想要哪个*/
			border-color: transparent transparent transparent red;
			
			/* 兼容低版本浏览器添加的设置 */
			font-size: 0;
			line-height: 0;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box2"></div>
</body>
</html>

显示效果 :

在这里插入图片描述

下面是放大 400% 后的效果 ;

在这里插入图片描述

设置 10 像素的边框 , 形成的三角形底部边为 20 像素 ;

在这里插入图片描述

三、使用 CSS 实现对话框代码示例

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>CSS 三角形示例</title>
	<style>
		body {
			background-color: black;
		}
		
		.triangle {
			/* 子元素使用绝对定位 父容器需要使用相对定位 */
			position: relative;
			
			/* 设置对话框下方的矩形框尺寸 */
			width: 200px;
			height: 100px;
			
			/* 设置对话框颜色值 */
			background-color: white;
			
			/* 浏览器水平居中 */
			margin: 100px auto;
		}
		
		.triangle-in {
			/* 三角形使用绝对定位 , 父容器使用相对定位 */
			position: absolute;
			/* 向上移动 40 像素 */
			top: -40px;
			
			/* 设置水平居中 左侧先移动到中间 然后再向左移动 20 像素 */
			left: 50%;
			margin-left: -20px;
			
			/* 宽高设置为 0 */
			width: 0;
			height: 0;
			
			/* 设置三角形底边 40 像素 */
			border-style: solid;
			border-width: 20px;
			/* 保留下边框颜色 其它边框都设置透明 */
			border-color: transparent transparent white transparent;
			
			/* 兼容低版本浏览器 */
			font-size: 0;
			line-height: 0;
		}
	</style>
</head>
<body>
	<div class="triangle">
		<div class="triangle-in"></div>
	</div>
	
</body>
</html>