使用 CSS 实现三角形步骤 :
/* 宽高设置为 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;
代码示例 :
<!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 像素 ;
代码示例 :
<!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>
执行结果 :