在页面中有时需要使用小三角形,这里给出了使用CSS创建的两种较为方便的方式,第一种是使用块元素创建,另一种是使用行内元素进行创建。
实现图如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三角形</title>
<style>
div{
/*
块元素高度被内容所撑开,所以高度无需置零
width:0px,设置内容区的宽度,不然块元素会独占一行
border,将块元素的边框设置为50像素的实线,颜色为透明
border-XXX-color,XXX将你想要设置的那个方向的颜色显示出来
*/
width:0px;
border: 50px solid transparent;
border-bottom-color: blue;
}
span{
/*
行内元素的高和宽都会被内容撑开,所以高宽都不需要设置
border,同样设置边框的大小样式和透明颜色
border-XXX-color,XXX将你想要设置的那个方向的颜色显示出来
*/
border:20px solid transparent;
border-bottom-color: blue;
}
</style>
</head>
<body>
<div>
</div>
<br>
<span>
</span>
</body>
</html>