PROMULGATOR

    放下～～接受

    北京市中国北京研究院
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 第一种方法 -->
<div class="box">
  <div class="boxcontent"></div>
  <div class="border-arrow"> <em></em> <ins></ins> </div>
</div>
<!-- 第二种方法 -->
<div class="box">
  <div class="boxcontent"></div>
  <div class="second-arrow"></div>
</div>
<!-- 第三种方法 -->
<div class="box">
  <div class="boxcontent"></div>
  <div class="third-arrow">
    <div class="third-arrow-inner"></div>
  </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
* {
    padding:0;
    margin:0;
    list-style:none;
    border:0;
}
/*第一种方法*/
    .box {
    width:200px;
    height:100px;
    margin:20px auto;
    position:relative;
}
.boxcontent {
    width:198px;
    height:98px;
    border:1px solid #ccc;
}
.border-arrow {
    width:0;
    height:0;
    font-size:0;
    line-height:0;
    position:absolute;
    left:10px;
    top:-16px;
}
.border-arrow em,.border-arrow ins {
    width:0;
    height:0;
    display:block;
    position:absolute;
    border:8px solid transparent;
    border-style:dashed dashed solid dashed;
}
.border-arrow em {
    border-bottom-color:#ccc;
}
.border-arrow ins {
    border-bottom-color:#fff;
    top:1px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

三种css方法实现三角效果

0