2015-01-09 122 views
-5

請任何人幫助我如何使用css創建下圖。如何使用css創建三角形

________/\_______ 
    |    | 
    |    | 
    |    | 
    |________________| 

請幫助我如何將使用css.and只做DIV應該使用。

+0

你有搜索存在的問題交配? – Harry

+0

提示:'border-style:solid dahsed' – diEcho

+0

我上面問了三角形@diEcho – Siva

回答

2

在這裏看到:http://jsfiddle.net/alexwcoleman/6ue8vvba/

.box { 
    position: relative; 
    border: 1px solid #000; 
    height:100px; 
    width:300px; 
    margin-top:100px; 
    background:#fff; 
} 
.box:after, .box:before { 
    bottom: 100%; 
    left: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-bottom-color: #fff; 
    border-width: 30px; 
    margin-left: -30px; 
} 
.box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-bottom-color: #000; 
    border-width: 31px; 
    margin-left: -31px; 
} 
1

該代碼使用了創建三角:

HTML: 
<div id="talkbubble"></div> 

CSS: 
#talkbubble { 
    width: 120px; 
    height: 80px; 
    background: red; 
    position: relative; 
    margin-top: 50px; 
} 
#talkbubble:before { 
    content: ""; 
position: absolute; 
right: 43%; 
bottom: 100%; 
width: 0; 
height: 0; 
border-left: 13px solid transparent; 
border-bottom: 25px solid red; 
border-right: 11px solid transparent; 
} 

觀看演示的位置:DEMO