猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

css3 代边框的小三角怎么做

css3 代边框的小三角怎么做


holdtom
浏览 804回答 3
3回答

红糖糍粑

你好，我这里用CSS实现了三种带边框三角，效果分别如图：实例代码如下，根据你个人的情况调整代码吧：1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192<!DOCTYPE&nbsp;html><html&nbsp;lang="en"><head>&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;charset="UTF-8">&nbsp;&nbsp;&nbsp;&nbsp;<title>Arrow</title></head><body><style>/*&nbsp;scale&nbsp;*/.arrow,.arrow:after{&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;border-top:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;border-left:&nbsp;30px&nbsp;dotted&nbsp;transparent;&nbsp;&nbsp;&nbsp;&nbsp;border-right:&nbsp;30px&nbsp;dotted&nbsp;transparent;&nbsp;&nbsp;&nbsp;&nbsp;border-bottom:&nbsp;30px&nbsp;dashed&nbsp;#000;}.arrow:after&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;'';&nbsp;&nbsp;&nbsp;&nbsp;transform:&nbsp;translateX(-50%)&nbsp;scale(.8);&nbsp;&nbsp;&nbsp;&nbsp;border-bottom:&nbsp;30px&nbsp;dashed&nbsp;#fff;}&nbsp;/*&nbsp;width&nbsp;&&nbsp;height&nbsp;*/.arrow1,.arrow1:after&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;border-top:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;border-left:&nbsp;30px&nbsp;dotted&nbsp;transparent;&nbsp;&nbsp;&nbsp;&nbsp;border-right:&nbsp;30px&nbsp;dotted&nbsp;transparent;&nbsp;&nbsp;&nbsp;&nbsp;border-bottom:&nbsp;30px&nbsp;dashed&nbsp;#000;}.arrow1:after&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;-26px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;2px;&nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;'';&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-top:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-left:&nbsp;26px&nbsp;dotted&nbsp;transparent;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-right:&nbsp;26px&nbsp;dotted&nbsp;transparent;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-bottom:&nbsp;26px&nbsp;dashed&nbsp;#fff;}&nbsp;/*&nbsp;border&nbsp;&&nbsp;after&nbsp;*/.arrow2&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;28px;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;28px;&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;border-top:&nbsp;2px&nbsp;solid&nbsp;#000;&nbsp;&nbsp;&nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;#000;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:&nbsp;translate(7px,&nbsp;14px)&nbsp;rotate(-45deg);&nbsp;&nbsp;&nbsp;&nbsp;-ms-transform:&nbsp;translate(7px,&nbsp;14px)&nbsp;rotate(-45deg);&nbsp;&nbsp;&nbsp;&nbsp;-o-transform:&nbsp;translate(7px,&nbsp;14px)&nbsp;rotate(-45deg);&nbsp;&nbsp;&nbsp;&nbsp;transform:&nbsp;translate(7px,&nbsp;14px)&nbsp;rotate(-45deg);}.arrow2:after&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;-2px;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;42px;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;2px;&nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;'';&nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;2px;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#000;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform-origin:&nbsp;left&nbsp;top;&nbsp;&nbsp;&nbsp;&nbsp;-moz-transform-origin:&nbsp;left&nbsp;top;&nbsp;&nbsp;&nbsp;&nbsp;-ms-transform-origin:&nbsp;left&nbsp;top;&nbsp;&nbsp;&nbsp;&nbsp;-o-transform-origin:&nbsp;left&nbsp;top;&nbsp;&nbsp;&nbsp;&nbsp;transform-origin:&nbsp;left&nbsp;top;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:&nbsp;rotate(45deg);&nbsp;&nbsp;&nbsp;&nbsp;-ms-transform:&nbsp;rotate(45deg);&nbsp;&nbsp;&nbsp;&nbsp;-o-transform:&nbsp;rotate(45deg);&nbsp;&nbsp;&nbsp;&nbsp;transform:&nbsp;rotate(45deg);}</style><span&nbsp;class="arrow"></span><span&nbsp;class="arrow1"></span><span&nbsp;class="arrow2"></span></body></html>
0

HUH函数

<!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>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

CSS3