純css實現帶箭頭的功能表列

來源:互聯網
上載者:User
以下為代碼,主要思想是把一個<span>的高度和寬度設定成0px,然後做較厚的邊框,其他三個方向的邊框設定顏色和背景顏色相同,只有顯示三角的那個方向的邊框背景顏色不同。需注意的是:在設計顯示箭頭的<span>時,記住一定要設計每個邊框的顏色等屬性,讓其他三個邊框顏色和背景色相同,另一個不同,就產生效果,如果沒有設定其他單個邊框,則沒有效果。(切記)

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
<!--
.d1 {
width:50px;
height:25px;
display:block;
text-align:center;
display:block;
line-height:25px;
text-align:left;
font-size:12px;
border: 1px solid #000;
position:relative;
background-color: #FFF;
text-decoration:none;
color:#C00;
}
a:hover {
border: 1px solid #C00;
}
a:hover span{
width:0px;
height:0px;
display:block;
right:0px;
top:6px;
position:absolute;
overflow:hidden;
background-color: #FFF;
border-left-width: 6px;
border-left-style: solid;
border-left-color: #C00;
border-top-width: 6px;
border-bottom-width: 6px;
border-right-width: 6px;
border-top-style: solid;
border-bottom-style: solid;
border-right-style: solid;
border-top-color: #FFF;
border-bottom-color: #FFF;
border-right-color: #FFF;
}

-->
</style>
</head>

<body>
<a class="d1" href="#">
   你好
<span></span>
</a>
</body>
</html>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.