第一种方法：需要多大的三角形就设置相应像素的border值，然后将其中三个方向的边框颜色设置为透明或者将边框颜色设置为与背景相同的颜色即可。例如：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 0;
border: 50px solid red;
border-bottom-color:transparent ;/*设置下边框的颜色为透明色,当然也设置为白色,因为背景颜色为白色*/
border-left-color: transparent;
border-right-color: transparent;
}
</style>
<body>
<div></div>
</body>
效果图：
第二种方法：按照第一种方法做出一个三角形，然后再写出一个与背景色相同颜色的三角形，不同的是第二个三角形不需要显示的边框的颜色必须设置为透明色，否则第一个三角形将被完全覆盖，而需要显示的那个边框颜色则要设置为与背景色同色。最后利用定位第二个三角形将第一个三角形不完全覆盖，例如：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 0;
border: 50px solid red;
border-bottom-color:transparent ;/*设置下边框的颜色为透明色,当然也设置为白色,因为背景颜色为白色*/
border-left-color: transparent;
border-right-color: transparent;
position: relative;
}
div::after{
content: "";
width: 0;
position: absolute;
display: block;
border:50px solid #FFFFFF;
border-bottom-color:transparent ;/*设置下边框的颜色为背景色,必须要将颜色设置为背景色*/
border-left-color: transparent;
border-right-color: transparent;
top:-70px;
left: -50px;
}
</style>
<body>
<div></div>
</body>
效果图：
第三种方法：先输入一个特殊字符◇，利用定位左右上下移动相应的距离，前提是父类标签必须设置超出超出隐藏。例如：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
margin: 100px auto;
overflow: hidden;/*设置超出隐藏*/
position: relative;
}
p{
font-size: 100px;
position: absolute;
top:-70px ;
}
</style>
<body>
<div>
<p>◇</p>
</div>
</body>
效果图：
5476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
