在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ css怎樣設(shè)置只有兩條邊的三角形

css怎樣設(shè)置只有兩條邊的三角形

UI給了個(gè)這樣的設(shè)計(jì)圖:

clipboard.png

  這個(gè)箭頭該怎樣實(shí)現(xiàn)?思路是怎樣的?網(wǎng)上都是帶背景沒邊框的。
如果是使用圖片,該相對(duì)于誰定位啊?如果添加鼠標(biāo)滑過或點(diǎn)擊跟隨移動(dòng)到對(duì)應(yīng)標(biāo)簽的效果又該怎樣實(shí)現(xiàn)呢?大概思路就好。拜托了~

回答
編輯回答
尕筱澄

三十客-在CSS中設(shè)置只有兩條邊的三角形

用三角形和兩個(gè)偽類即可實(shí)現(xiàn),效果見上述實(shí)現(xiàn)!

li {
            position: relative;
            padding: 0.5em 0.75em;
        }
        li:hover {
            font-weight: bold;
            cursor: pointer;
        }
        li:hover::before {
            content: '';
            position: absolute;
            top : 19px;
            right : 0;
            width: 0;
            height: 0;
            border-right: 10px solid #ccc;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
        }
        li:hover::after {
            content: '';
            position: absolute;
            top : 19px;
            right : -2px;
            width: 0;
            height: 0;
            border-right: 10px solid #fff;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
        }
2017年3月4日 23:59
編輯回答
編輯回答
墻頭草

偽類,一個(gè)::before,一個(gè)::after,你可以參考一下 百度新聞首頁 輪播切換按鈕hover時(shí)候的樣式變化

2018年8月2日 19:14
編輯回答
玩控

可以考慮用偽類來實(shí)現(xiàn)::before + ::after + 定位處理

2017年6月14日 03:08
編輯回答
情未了

實(shí)心三角你應(yīng)該會(huì)吧,其實(shí)就是兩個(gè)實(shí)心三角, 一個(gè)灰色的一個(gè)白色的,白色的三角把灰色的三角擋住,只剩下一個(gè)灰色角的邊框就OK了

2018年8月9日 00:51
編輯回答
遲月

我其實(shí)是被題目逗笑進(jìn)來的,兩條邊的叫角,不是三角形。然后關(guān)于你這需求,你看下偽類。

2018年9月15日 17:06
編輯回答
來守候

相當(dāng)于菜單了

應(yīng)該做成一行一行的

由css樣式名,來控制右邊的符號(hào)的顯示與隱藏(加上一個(gè)class顯示,否則隱藏)

如果要做成有滑動(dòng)動(dòng)畫的,就不適合做到每一行,應(yīng)該做到外面一層標(biāo)簽上,由鼠標(biāo)事件來計(jì)算相應(yīng)移動(dòng)到的位置,動(dòng)態(tài)修改CSS參數(shù)值

實(shí)現(xiàn)這個(gè)元素的顯示樣式,可以用一個(gè)DIV ,設(shè)置寬高,只要兩個(gè)邊框,旋轉(zhuǎn)45度角,絕對(duì)定位到右邊

2017年5月25日 15:34