純css寫箭頭

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head>
  <title>CSS 箭頭Demo</title>
  <style type="text/css">
    /* 向上的箭頭,類似于A,只有三個邊，不能指定上邊框 */

    div.arrow-up {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      /* 左邊框的寬 */
      border-right: 5px solid transparent;
      /* 右邊框的寬 */
      border-bottom: 5px solid #2f2f2f;
      /* 下邊框的長度|高,以及背景色 */
      font-size: 0;
      line-height: 0;
    }
    /* 向下的箭頭 類似于 V */

    div.arrow-down {
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 20px solid #f00;
      font-size: 0;
      line-height: 0;
    }
    /* 向左的箭頭: 只有三個邊：上虎囚、下角塑、右。而 <| 總體來看淘讥，向左三角形的高=上+下邊框的長度圃伶。 寬=右邊框的長度 */

    div.arrow-left {
      width: 0;
      height: 0;
      border-bottom: 15px solid transparent;
      /* 下邊框的高 */
      border-top: 15px solid transparent;
      /* 上方邊框的高 */
      border-right: 10px solid yellow;
      /* 右邊框的長度|寬度，以及背景色 */
      font-size: 0;
      line-height: 0;
    }
    /* 向右的箭頭: 只有三個邊：上蒲列、下窒朋、左。而 |> 總體來看蝗岖，向右三角形的高=上+下邊框的長度侥猩。 寬=左邊框的長度 */

    div.arrow-right {
      width: 0;
      height: 0;
      border-bottom: 15px solid transparent;
      /* 下邊框的高 */
      border-top: 15px solid transparent;
      /* 上方邊框的高 */
      border-left: 60px solid green;
      /* 左邊框的長度|寬度，以及背景色 */
      font-size: 0;
      line-height: 0;
    }
    /* 基本樣式 */

    .tip {
      background: #eee;
      border: 1px solid #ccc;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      position: relative;
      width: 200px;
    }
    /* 箭頭 - :before and :after, 一起組成了好看的氣泡小箭頭 */

    .tip:before {
      position: absolute;
      display: inline-block;
      border-top: 7px solid transparent;
      border-right: 7px solid #eee;
      border-bottom: 7px solid transparent;
      border-right-color: rgba(0, 0, 0, 0.2);
      left: -8px;
      top: 20px;
      content: '';
    }
    /* 背景陰影*/

    .tip:after {
      position: absolute;
      display: inline-block;
      border-top: 6px solid transparent;
      border-right: 6px solid #eee;
      border-bottom: 6px solid transparent;
      left: -6px;
      top: 21px;
      content: '';
    }
  </style>
</head>

<body>
  <div id="contentHolder">
    <h1>CSS 箭頭Demo</h1>
    <p>以下代碼.是極好的純 CSS 箭頭樣式抵赢，不使用背景圖!</p>
    <div id="position:relative;">
      <div class="arrow-up">向上的箭頭</div>

      <div class="arrow-down">向下的箭頭</div>

      <div class="arrow-left">向左的箭頭</div>

      <div class="arrow-right">向右的箭頭</div>
    </div>
    <h2>CSS 箭頭氣泡 欺劳，使用 偽類(Pseudo-Element)</h2>
    <div style="position:relative;">
      <div class="tip">
        企業(yè)級開發(fā)首選技術是什么唧取？JavaEE和.Net哪個技術更好？在JavaEE開發(fā)中主要用哪些框架划提？另外在移動大熱的趨勢下如何開發(fā)出一個成功的Android產品枫弟？
      </div>
      <br/>
      <div class="tip">
        向左的箭頭: 只有三個邊：上、下腔剂、右媒区。而
        < | 總體來看，向左三角形的高=上+下邊框的長度掸犬。 寬=右邊框的長度 向右的箭頭: 只有三個邊：上袜漩、下、左湾碎。而 |> 總體來看宙攻，向右三角形的高=上+下邊框的長度。 寬=左邊框的長度 向上的箭頭,類似于A,只有三個邊介褥，不能指定上邊框
      </div>
    </div>
  </div>
</body>

</html>

最后編輯于：2017.12.09 02:38:35

?著作權歸作者所有,轉載或內容合作請聯系作者

人面猴
序言：七十年代末座掘，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子柔滔，更是在濱河造成了極大的恐慌溢陪，老刑警劉巖，帶你破解...
沈念sama閱讀 212,718評論 6贊 492
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件睛廊，死亡現場離奇詭異形真，居然都是意外死亡，警方通過查閱死者的電腦和手機超全，發(fā)現死者居然都...
沈念sama閱讀 90,683評論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門咆霜，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人嘶朱，你說我怎么就攤上這事蛾坯。” “怎么了疏遏？”我有些...
開封第一講書人閱讀 158,207評論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵脉课，是天一觀的道長。經常有香客問我财异，道長倘零，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 56,755評論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任宝当，我火速辦了婚禮，結果婚禮上胆萧，老公的妹妹穿的比我還像新娘庆揩。我一直安慰自己俐东，他們只是感情好，可當我...
茶點故事閱讀 65,862評論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布订晌。她就那樣靜靜地躺著虏辫，像睡著了一般。火紅的嫁衣襯著肌膚如雪锈拨。梳的紋絲不亂的頭發(fā)上砌庄，一...
開封第一講書人閱讀 50,050評論 1贊 291
城市分裂傳說
那天，我揣著相機與錄音奕枢，去河邊找鬼娄昆。笑死，一個胖子當著我的面吹牛缝彬，可吹牛的內容都是我干的萌焰。我是一名探鬼主播，決...
沈念sama閱讀 39,136評論 3贊 410
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼谷浅，長吁一口氣：“原來是場噩夢啊……” “哼扒俯！你這毒婦竟也來了？” 一聲冷哼從身側響起一疯，我...
開封第一講書人閱讀 37,882評論 0贊 268
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤撼玄，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后墩邀，有當地人在樹林里發(fā)現了一具尸體掌猛，經...
沈念sama閱讀 44,330評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 36,651評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年磕蒲，在試婚紗的時候發(fā)現自己被綠了留潦。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,789評論 1贊 341
活死人
序言：一個原本活蹦亂跳的男人離奇死亡辣往，死狀恐怖兔院，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情站削，我是刑警寧澤坊萝，帶...
沈念sama閱讀 34,477評論 4贊 333
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站许起，受9級特大地震影響十偶，放射性物質發(fā)生泄漏。R本人自食惡果不足惜园细，卻給世界環(huán)境...
茶點故事閱讀 40,135評論 3贊 317
男人毒藥：我在死后第九天來索命
文/蒙蒙一惦积、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧猛频，春花似錦狮崩、人聲如沸蛛勉。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,864評論 0贊 21
一樁弒父案睦柴，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽诽凌。三九已至，卻和暖如春坦敌，著一層夾襖步出監(jiān)牢的瞬間侣诵，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,099評論 1贊 267
情欲美人皮
我被黑心中介騙來泰國打工狱窘，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留杜顺，地道東北人。一個月前我還...
沈念sama閱讀 46,598評論 2贊 362
代替公主和親
正文我出身青樓训柴，卻偏偏與公主長得像哑舒，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子幻馁，可洞房花燭夜當晚...
茶點故事閱讀 43,697評論 2贊 351

純css寫箭頭

推薦閱讀更多精彩內容