css3 代边框的小三角怎么做
3 回答
红糖糍粑
TA贡献1815条经验 获得超6个赞
你好，我这里用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> |
HUH函数
TA贡献1836条经验 获得超4个赞
<!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 关注
- 803 浏览
添加回答
举报
0/150
提交
取消