利用 border 屬性做的對話方塊小三角
阿新 • • 發佈：2018-12-08
轉載地址：http://corvine.diandian.com/post/2012-08-19/40036038981
利用 border 屬性做的對話方塊小三角
四個角都有，存著慢慢用~
以後可以不用做三角形圖片了 =v=
<!DOCTYPE html>
<html>
<head>
<title>三角形對話方塊測試</title>
<style type="text/css">
div.dialog-box {
width: 400px;
height: 200px;
background-color: #C4D5AC;
border: 1px solid #0F8055;
position: relative;
margin: 50px auto;
}
div.dialog-box div.top-triangle-border {
width: 0;
height: 0;
border: 11px solid transparent;
border-bottom: 11px solid #0F8055;
position: absolute;
top: -22px;
right: 20px;
}
div.dialog-box div.top-triangle {
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom: 10px solid #C4D5AC;
position: absolute;
top: -9px;
right: -10px;
}
div.dialog-box div.right-triangle-border {
width: 0;
height: 0;
border: 11px solid transparent;
border-right: 11px solid #0F8055;
position: absolute;
top: 20px;
left: -22px;
}
div.dialog-box div.right-triangle {
width: 0;
height: 0;
border: 10px solid transparent;
border-right: 10px solid #C4D5AC;
position: absolute;
top: -10px;
left: -9px;
}
div.dialog-box div.bottom-triangle-border {
width: 0;
height: 0;
border: 11px solid transparent;
border-top: 11px solid #0F8055;
position: absolute;
bottom: -22px;
left: 20px;
}
div.dialog-box div.bottom-triangle {
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 10px solid #C4D5AC;
position: absolute;
bottom: -9px;
left: -10px;
}
div.dialog-box div.left-triangle-border {
width: 0;
height: 0;
border: 11px solid transparent;
border-left: 11px solid #0F8055;
position: absolute;
bottom: 20px;
right: -22px;
}
div.dialog-box div.left-triangle {
width: 0;
height: 0;
border: 10px solid transparent;
border-left: 10px solid #C4D5AC;
position: absolute;
bottom: -10px;
right: -9px;
}
</style>
</head>
<body>
<div class="dialog-box">
<div class="top-triangle-border">
<div class="top-triangle"></div>
</div>
<div class="right-triangle-border">
<div class="right-triangle"></div>
</div>
<div class="bottom-triangle-border">
<div class="bottom-triangle"></div>
</div>
<div class="left-triangle-border">
<div class="left-triangle"></div>
</div>
</div>
</body>
</html>預覽圖：
