CSS 制作三角形和箭頭

角形

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>三角形</title>
<style type="text/css">
body{
    background-color: pink;
}
div{
    width: 0px;
    height: 0px;
    border-top: 10px solid blue;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    /* 唰(忽略不計) */
    /* border-width: 10px;
    border-style: solid;
    border-color: green orange blue pink; */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

箭頭

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
#bigBox{
    width: 0;
    height: 0;
    border-top: 200px solid black;
    border-right: 200px solid transparent;
    border-bottom: 200px solid transparent;
    border-left: 200px solid transparent;
}
#smallBox{
    width: 0;
    height: 0;
    border-top: 160px solid white;
    border-right: 160px solid transparent;
    border-bottom: 160px solid transparent;
    border-left: 160px solid transparent;
    position: absolute;
    left: 40px;
    top: 0;
}
</style>
</head>
<body>
<div id="bigBox"></div>
<div id="smallBox"></div>
</body>
</html>

三角形使用案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 40px;
    cursor: pointer;
}
ul{
    width: 200px;
    margin: 0 auto;
    border: 1px solid #000;
}
h3{
    text-indent: 1em;
    background-color: dodgerblue;
    position: relative;
}
h3:before{
    content: "";
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #000;
    position: absolute;
    left: 5px;
    top: 12px;
}
h3.active:before{
    border-top: 8px solid #000;
    border-left: 8px solid transparent;
    left: 0px;
    top: 15px;
}
</style>
</head>
<body>
<ul>
<li>
<h3>我的好友</h3>

</li>
<li>
<h3 class="active">企業好友</h3>

</li>
<li>
<h3>黑名單</h3>

</li>
</ul>
</body>
</html>

制作箭頭

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
#bigBox{
    width: 0;
    height: 0;
    border-top: 200px solid black;
    border-right: 200px solid transparent;
    border-bottom: 200px solid transparent;
    border-left: 200px solid transparent;
}
#smallBox{
    width: 0;
    height: 0;
    border-top: 160px solid white;
    border-right: 160px solid transparent;
    border-bottom: 160px solid transparent;
    border-left: 160px solid transparent;
    position: absolute;
    left: 40px;
    top: 0;
}
</style>
</head>
<body>
<div id="bigBox"></div>
<div id="smallBox"></div>
</body>
</html>

實例: 實心箭頭上下左右

Query—由美國人John Resig于2006年創建

jQuery是目前最流行的JavaScript程序庫，它是對JavaScript對象和函數的封裝

一、初識jQuery

實現隔行變色效果，只需一句關鍵代碼

$("tr:even").css("background-color","#e8f0f2");

1:jQuery能做什么?

訪問和操作DOM元素,控制頁面樣式,對頁面事件進行處理,擴展新的jQuery插件,與Ajax技術完美結合;

優點:

體積小，壓縮后只有100KB左右,強大的選擇器,出色的DOM封裝,可靠的事件處理機制,出色的瀏覽器兼容性,使用隱式迭代簡化編程,豐富的插件支持;

注意:jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高開發效率

獲取jQuery:進入jQuery官網：http://jquery.com

二、jQuery基本語法

$(document).ready(function() {

alert("我欲奔赴沙場征戰jQuery，勢必攻克之！");

});

</script>

鏈式操作語法:

$("h2").css("background-color","#ccffff").next().css("display","block");

隱式迭代語法:

$(document).ready(function() {

$("li").css({"font-weight":"bold","color":"red"});

});

DOM對象：直接使用JavaScript獲取的節點對象; jQuery對象：使用jQuery包裝DOM對象后產生的對象，它能夠使用jQuery中的方法

DOM對象轉jQuery對象

var objDOM=document.getElementById("title");

var objHTML=objDOM.innerHTML;

jQuery對象轉DOM對象

var txtName=document.getElementById("txtName");

var $txtName=$(txtName);

三、實例廣告輪播圖

<!DOCTYPE html>

<html>

<title> 廣告圖片輪播切換</title>

</head>

<style>

ul,

li {

padding: 0;

margin: 0;

list-style: none;

}

.adver {

margin: 0 auto;

width: 700px;

overflow: hidden;

height: 454px;

position: relative;

background: url("../fiveClass/img/adver01.jpg");

}

ul {

position: absolute;

bottom: 10px;

z-index: 100;

width: 100%;

text-align: center;

}

ul li {

display: inline-block;

font-size: 10px;

line-height: 20px;

font-family: "微軟雅黑";

margin: 0 1px;

width: 20px;

height: 20px;

border-radius: 50%;

background: #333333;

text-align: center;

color: #ffffff;

}

.arrowLeft,

.arrowRight {

position: absolute;

width: 30px;

background: rgba(0, 0, 0, 0.2);

height: 50px;

line-height: 50px;

text-align: center;

top: 200px;

z-index: 150;

font-family: "微軟雅黑";

font-size: 28px;

font-weight: bold;

cursor: pointer;

display: none;

}

.arrowLeft {

left: 10px;

}

.arrowRight {

right: 10px;

}

li:nth-of-type(1) {

background: orange;

}

</style>

<body>

<ul>

</ul>

</div>

</body>

</html>

$(document).ready(function(){

var imgs=new Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg")

// 設置一個標識用來控制圖片下標

var flag=0;

// 鼠標移入顯示箭頭

$(".adver").mouseover(function(){

$(".arrowLeft,.arrowRight").show();

})

// 鼠標移出隱藏箭頭

$(".adver").mouseout(function(){

$(".arrowLeft").hide();

$(".arrowRight").hide();

})

// 左箭頭單機事件

$(".arrowLeft").click(function(){

flag--;

// 判斷是否是第一張圖片

if(flag<0){

flag=0;

alert("現在是第一張");

}else{

// 背景圖片替換

$(".adver").css("background","url(../fiveClass/img/"+imgs[flag]+")");

$(".adver>ul>li:nth-of-type("+(flag+1)+")").css("background-color","orange");

/**

* siblings()是取得一個包含匹配的元素集合中

* 每一個元素的所有唯一同輩元素的元素集合

* 用于篩選同輩元素的表達式<除了選擇器選擇的元素的同級元素>

* 沒有選中的元素變成("background","#333")

$(".adver>ul>li:nth-of-type("+(flag+1)+")").siblings().css("background","#333");

}

})

// 右箭頭單機事件

$(".arrowRight").click(function(){

// 判斷是否是最后一張圖片

flag++;

if(flag>imgs.length-1){

flag=imgs.length-1;

alert("現在是最后一張");

}else{

$(".adver").css("background","url(../fiveClass/img/"+imgs[flag]+")");

$(".adver>ul>li:nth-of-type("+(flag+1)+")").css("background-color","orange");

$(".adver>ul>li:nth-of-type("+(flag+1)+")").siblings().css("background","#333");

}

})

* css3三角形（向上 ▲） */

div.arrow-up {

width:0px;

height:0px;

border-left:5px solid transparent; /* 右透明 */

border-right:5px solid transparent; /*右透明 */

border-bottom:5px solid #2f2f2f; /* 定義底部顏色 */

font-size:0px;

line-height:0px;

}

在線咨詢

上一篇：MySQL 臨時表空間數據過多導致磁盤空間不足的問題
下一篇：Chrome Bug：音頻或視頻成為竊取網絡秘密的工

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS 制作三角形和箭頭

您的項目需求