css3 代邊框的小三角怎么做
3 回答
慕哥6287543
TA貢獻1831條經驗 獲得超10個贊
你好，我這里用CSS實現了三種帶邊框三角，效果分別如圖：
實例代碼如下，根據你個人的情況調整代碼吧：
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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Arrow</title> </head> <body> <style> /* scale */ .arrow, .arrow:after{ position: relative; display: inline-block; width: 0; height: 0; border-top: 0; border-left: 30px dotted transparent; border-right: 30px dotted transparent; border-bottom: 30px dashed #000; } .arrow:after { position: absolute; top: 0; content: ''; transform: translateX(-50%) scale(.8); border-bottom: 30px dashed #fff; }
/* width & height */ .arrow1, .arrow1:after { position: relative; display: inline-block; width: 0; height: 0; border-top: 0; border-left: 30px dotted transparent; border-right: 30px dotted transparent; border-bottom: 30px dashed #000; } .arrow1:after { position: absolute; left: -26px; top: 2px; content: ''; width: 0; height: 0; border-top: 0; border-left: 26px dotted transparent; border-right: 26px dotted transparent; border-bottom: 26px dashed #fff; }
/* border & after */ .arrow2 { position: relative; display: inline-block; width: 28px; height: 28px; border: 0; border-top: 2px solid #000; border-right: 2px solid #000; -webkit-transform: translate(7px, 14px) rotate(-45deg); -ms-transform: translate(7px, 14px) rotate(-45deg); -o-transform: translate(7px, 14px) rotate(-45deg); transform: translate(7px, 14px) rotate(-45deg); } .arrow2:after { position: absolute; left: 0; top: -2px; width: 42px; height: 2px; content: ''; border-radius: 2px; background-color: #000; -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } </style> <span class="arrow"></span> <span class="arrow1"></span> <span class="arrow2"></span> </body> </html> |
喵喔喔
TA貢獻1735條經驗 獲得超5個贊
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
/* 上三角 */
.arrow-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid green;
}
/* 下三角 */
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid orange;
}
/* 右三角 */
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid blue;
}
/* 左三角 */
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid silver;
}
</style>
</head>
<body>
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</body>
</html>
- 3 回答
- 0 關注
- 449 瀏覽
添加回答
舉報
0/150
提交
取消