程序博客网 > 小爱和花儿知乎

HTML:利用border写出三角形的三种方法

来源：互联网发布：小爱和花儿知乎编辑：程序博客网时间：2024/06/14 03:08

第一种方法：需要多大的三角形就设置相应像素的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>

效果图：

阅读全文

1 0

小爱和花儿知乎

小爱和花儿知乎

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子 dx7 dx5 dx12 dx11 dx药 dx9 东南dx 东南dx3 东南dx7 东南dx5 东南汽车dx 东南汽车dx3 dx什么意思东南dx5报价图片东南汽车dx7 dx是什么意思东南dx3图片及报价大象网址dx8855app 4dx厅什么意思尼康dx 东南dx3多少钱佳能1dx2 dx是什么药东南汽车dx5 东南dx3为什么没人买 dx是什么 dx什么药 2018款东南dx3垃圾货东南dx3怎么样东南dx3新能源斗山dx80 处dx啥意思东南dx7自动挡价格东南dx7怎么样东南dx7严重质量问题东南x7 三菱dx7 东风dx7 东南菱悦dx7 dx7怎么样东南ds7