使用div+css实现简单的箭头_css箭头状div-优快云博客

本文链接：https://blog.youkuaiyun.com/bbj123456/article/details/81333268

一、情景描述：

众所周知，我们在使用frame框架的时候，将左边或者上边的内容隐藏或者显示，在操作过程中，如果我们不想通过图标来实现箭头功能，可以通过div+css实现。

二、代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
text-align: center;
}
.box
{
background-color: Teal;
width: 600px;
height: 600px;
margin: 50px auto;
}

.box p
{
background:green;
}

/*箭头向上*/
.to_top
{

width: 0;
height: 0;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}

/*箭头向下*/
.to_bottom
{
width: 0;
height: 0;
border-top: 10px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
/*箭头向左*/
.to_left {
width: 0;
height: 0;
border-right: 10px solid #fff;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
/*箭头向右*/
.to_right
{

width: 0;
height: 0;
border-left: 10px solid #fff;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}

</style>
</head>
<body>
<div class="box">
<p>
向上箭头</p>
<div class="to_top">
</div>
<p>
向左箭头</p>
<div class="to_left">
</div>
<p>
向右箭头</p>
<div class="to_right">
</div>
<p>
向下箭头</p>
<div class="to_bottom">
</div>
</div>
</body>
</html>