请问如何实现这个样式,蟹蟹啦
随便写个代码吧
<!--html部分-->
<div id="test"></div>
//css部分
#test{
width: 200px;
height: 80px;
background: grey;
position: relative;
}
#test:after{
display: inline-block;
content: '√';
color: #fff;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid orange;
border-bottom: 20px solid orange;
position: absolute;
bottom: 0;
right: 0;
}
效果
更多具体实现只能靠自己了!
当你click或hover时,动态添加class,根据class不同修改样式,思路无非就是这样。
推荐使用图片来实现。找一下UI,让TA帮你做一个。
最好的方式,是分2块来做。
1, 外侧边框border
2, 右下角选中图标
解决方式:
1, 选中时添加样式(比如设置一个.selected,然后设置selected的边框border:1px solid #ff9727);
2, 下部图标可以通过绝对定位。
&.selected
position relative
border 1px solid #ff9727
&:after
position absolute
content ''
bottom 0
right 0
width 32px
height 32px
background url('/img/pay/pay_selected.png') no-repeat center
8 回答4.7k 阅读✓ 已解决
6 回答3.3k 阅读✓ 已解决
6 回答2.3k 阅读
5 回答6.3k 阅读✓ 已解决
5 回答1.2k 阅读✓ 已解决
3 回答2.4k 阅读✓ 已解决
3 回答1.4k 阅读✓ 已解决
主要就是用css画一个三角,其它的没什么