css实现三角形

最新推荐文章于 2023-09-05 16:23:33 发布

aogai1898

最新推荐文章于 2023-09-05 16:23:33 发布

阅读量75

点赞数

原文链接：http://www.cnblogs.com/TiffanyHam/p/4995157.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.triangle_border_up{
display:block;
width:0;
height:0;
border-width:0 10px 10px;
border-style:solid;
border-color:transparent transparent #fc0;/*透明 透明 黄*/
position:absolute;
top:0px;
left:0px;
}
.triangle_border_down{
display: block;
width: 0;
height: 0;
border-width: 9px 9px 0;
border-style: solid;
border-color: #fc0 transparent transparent;
position: absolute;
top: 16px;
left: 10%;
}
.triangle_border_left{
display:block;
width:0;
height:0;
border-width:8px 8px 8px 0;
border-style:solid;
border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */
position:absolute;
top:0px;
left:36%;
}
.triangle_border_right{
display:block;
width:0;
height:0;
border-width:8px 0 8px 8px;
border-style:solid;
border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
position:absolute;
top:0px;
left:70%;
}
</style>
</head>
<body>
<span class="triangle_border_up"></span>
<span class="triangle_border_down"></span>
<span class="triangle_border_left"></span>
<span class="triangle_border_right"></span>
</body>
</html>