在线观看不卡亚洲电影_亚洲妓女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