请问如何实现这个样式，蟹蟹啦

关于css选中的样式

发布于
2017-11-06

✓ 已被采纳

主要就是用css画一个三角，其它的没什么

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .block {
            position: relative;
            width: 200px;
            height: 100px;
            margin: 0 10px;
            background: #ccc;
        }
        .block:hover{
            box-sizing: border-box;
            border: 1px solid #ff8711;
        }
        .block:hover:before {
            content: '';
            display: block;
            position: absolute;
            right: 0;
            bottom: 0;
            border: 17px solid #ff8711;
            border-top-color: transparent;
            border-left-color: transparent;
            color: #fff;
        }
        .block:hover:after {
            content: '';
            display: block;
            width: 5px;
            height: 12px;
            position: absolute;
            right: 6px;
            bottom: 6px;
            border: 2px solid #fff;
            border-top-color: transparent;
            border-left-color: transparent;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

</body>
</html>

图片描述

NotAPanda

1101310

发布于
2017-11-06

更新于
2017-11-06

使用图片
使用css实现三角形随便一个教程

随便写个代码吧

<!--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帮你做一个。

kakaguo

1372

发布于
2017-11-06

更新于
2017-11-06

最好的方式，是分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

海滨小新

1237

发布于
2017-11-06

png，点击:hover{background:url(img)}