關(guān)于css選中的樣式

請問如何實(shí)現(xiàn)這個(gè)樣式，蟹蟹啦

回答

編輯回答

貓館

使用圖片
使用css實(shí)現(xiàn)三角形隨便一個(gè)教程

隨便寫個(gè)代碼吧

<!--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;
}

效果
圖片描述

更多具體實(shí)現(xiàn)只能靠自己了！

當(dāng)你click或hover時(shí)，動態(tài)添加class，根據(jù)class不同修改樣式，思路無非就是這樣。
推薦使用圖片來實(shí)現(xiàn)。找一下UI，讓TA幫你做一個(gè)。

2018年4月29日 23:35

編輯回答

撥弦

css畫三角或者用圖片

2017年7月17日 22:22

編輯回答

大濕胸

png，點(diǎn)擊:hover{background:url(img)}

2018年2月12日 01:09

編輯回答

涼心人

主要就是用css畫一個(gè)三角，其它的沒什么

<!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>

圖片描述

2017年2月19日 02:18

編輯回答

瞄小懶

最好的方式，是分2塊來做。
1, 外側(cè)邊框border
2, 右下角選中圖標(biāo)

解決方式：
1, 選中時(shí)添加樣式（比如設(shè)置一個(gè).selected，然后設(shè)置selected的邊框border：1px solid #ff9727）;
2, 下部圖標(biāo)可以通過絕對定位。

&.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

2017年6月8日 00:08