css怎么實現(xiàn)箭頭和帶缺口提示框-創(chuàng)新互聯(lián)

css怎么實現(xiàn)箭頭和帶缺口提示框？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

主要從事網(wǎng)頁設(shè)計、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機版網(wǎng)站建設(shè)）、響應(yīng)式網(wǎng)站建設(shè)、程序開發(fā)、微網(wǎng)站、小程序設(shè)計等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)絡(luò)營銷經(jīng)驗，集策劃、開發(fā)、設(shè)計、營銷、管理等多方位專業(yè)化運作于一體，具備承接不同規(guī)模與類型的建設(shè)項目的能力。

 一、實現(xiàn)如圖所示箭頭


css怎么實現(xiàn)箭頭和帶缺口提示框

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
.out{
	width: 200px;
	height: 200px;
	background: #f00;
	position: relative;
}
.word{
	position: absolute;
	left: 60px;
	line-height: 40px;
}
.triangle-out{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0px;
	height: 0px;
	display: block;
	border-top: 20px solid #f00;
	border-right: 20px solid #f00;
	border-bottom: 20px solid #f00;
	border-left: 40px solid #ff0;
}
.triangle-in{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0px;
	height: 0px;
	display: block;
	border-top: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #f00;
}
</style>
</head>
<body>
	<p class="out">
		<span class="triangle-out"></span>
		<span class="triangle-in"></span>
		<span class="word">read more</span>
	</p>
</body>
</html>

二、實現(xiàn)帶缺口提示框

css怎么實現(xiàn)箭頭和帶缺口提示框


<!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>
.wrap{
	font-size: 12px;
	margin:40px auto;
	width:600px;
}
.ui-slider-tooltip{
	background:#FCFDFD; 
	border:1px solid green;
	color:#222222;
	display: block;
	text-align: center;
	padding: 5px 3px 5px 3px;
	width: 190px;	
	position: relative; 
}
.ui-corner-all {
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-left-radius:5px 5px;
	-webkit-border-top-right-radius:5px 5px;
	-webkit-border-bottom-right-radius:5px 5px;
	-webkit-border-bottom-left-radius:5px 5px;
}
.ui-tooltip-pointer-down {
	border-bottom-width: 0;
	border-left: 7px dashed transparent; 
	border-right: 7px dashed transparent;
	border-top: 8px solid green;
	bottom:	-8px;
	display: block;
	height:0;
	left: 50%;
	margin-left: -7px;
	position: absolute; 
	width:0;
}

.ui-tooltip-pointer-down-inner {
	border-left: 6px dashed transparent; 
	border-right: 6px dashed transparent;
	border-top: 7px solid #fff;
	left: -6px;
	top: -9px;
	position: absolute; 
}

.a{
	display: block;width:0;height:0;
	border-left: 7px dashed transparent; 
	border-right: 7px dashed transparent;
	border-top: 8px solid green;
	border-bottom: 0;
	position: absolute;
}
.b{
	position: absolute; 
	border-left: 6px dashed transparent; 
	border-right: 6px dashed transparent;
	border-top: 7px solid #fff;
	top: -9px;
	left: -6px;
}
</style>
</head>
<body>
<p class="wrap">
	<h2>用CSS實現(xiàn)帶缺口的提示框</h2>
	<span class="a">
		<span class="b"></span>
	</span>
	<br/>
	<span class="a">
		<span class="b" style="top:-11px;"></span>
	</span>
	<br/>


	<span class="ui-slider-tooltip  ui-corner-all">
		<span>帶缺口提示框</span>
		<span class="ui-tooltip-pointer-down">
		<span class="ui-tooltip-pointer-down-inner" ></span>
		</span>
	</span>
	<br/>
	<span class="ui-slider-tooltip  ui-corner-all" style="background: #f00">
		<span>加個背景就可以看清原理啦</span>
		<span class="ui-tooltip-pointer-down">
		<span class="ui-tooltip-pointer-down-inner" ></span>
		</span>
	</span>
</p>
</p>
</body>
</html>

其實就是利用寬度高度為0的box，設(shè)置border,得到想要的三角形，通過三角形的疊加顯示制作出箭頭的效果~

感謝各位的閱讀！看完上述內(nèi)容，你們對css怎么實現(xiàn)箭頭和帶缺口提示框大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

標題名稱：css怎么實現(xiàn)箭頭和帶缺口提示框-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://bm7419.com/article18/goedp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、域名注冊、做網(wǎng)站、搜索引擎優(yōu)化、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作