只有左右框

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<div align="right">
<div style="width:47%; border-style:solid; border-width:1px; border-radius:15px">
<div style="text-align:center;margin:5%">
这是右边
</div>
</div>
</div>


<div align="left">
<div style="width:47%; border-style:solid; border-width:1px; border-radius:15px">
<div style="text-align:center;margin:5%">
这是左边
</div>
</div>
</div>

带有箭头的左右框


  • 写法一

     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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

    <style type="text/css">
.div-diabox{
    width: 60%;
    border-style: solid;
    border-width: 1px;
    border-radius: 16px;
    position: relative;
    padding:30px;
    text-align:center
}

.div-diabox .arrow-right-out{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-color: transparent transparent transparent black;
    border-width: 10px;
    position: absolute;
    top: 10px;
    right: -20px;
}
.div-diabox .arrow-right-in{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-color: transparent transparent transparent white;
    border-width: 10px;
    position: absolute;
    top: 10px;
    right: -19px;
}
.div-diabox .arrow-left-out{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-color: transparent black transparent transparent;
    border-width: 10px;
    position: absolute;
    top: 10px;
    left: -20px;
}
.div-diabox .arrow-left-in{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-color: transparent white transparent transparent;
    border-width: 10px;
    position: absolute;
    top: 10px;
    left: -19px;
}
</style>

<div align="right">
<div class="div-diabox">
<span class="arrow-right-out"></span>
<span class="arrow-right-in"></span>
右边
</div>
</div>
<br/>

<div align="left">
<div class="div-diabox">
<span class="arrow-left-out"/></span>
<span class="arrow-left-in"></span>
左边
</div>
</div>
<br/>

  • 写法二

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

    <div align="right">
<div style="width: 60%; border-style: solid; border-width: 1px; border-radius: 16px; position: relative; padding:30px; text-align:center">
<span style="width: 0px; height: 0px; border-style: solid; border-color: transparent transparent transparent black; border-width: 10px; position: absolute; top: 10px; right: -20px;"></span>
<span style="width: 0px; height: 0px; border-style: solid; border-color: transparent transparent transparent white; border-width: 10px; position: absolute; top: 10px; right: -19px"></span>
右边
</div></div><br/>

<div align="left">
<div style="width: 60%; border-style: solid; border-width: 1px; border-radius: 16px; position: relative; padding:30px; text-align:center">
<span style="width: 0px; height: 0px; border-style: solid; border-color: transparent black transparent transparent; border-width: 10px; position: absolute; top: 10px; left: -20px;"></span>
<span style="width: 0px; height: 0px; border-style: solid; border-color: transparent white transparent transparent; border-width: 10px; position: absolute; top: 10px; left: -19px;"></span>
左边
</div></div><br/>