How to set triangles with only two sides by css

UI gives a design drawing like this:

clipboard.png

how should this arrow be implemented? What"s the train of thought? The Internet is full of backgrounds and no borders.
if you are using a picture, who should locate it relative to? How do you achieve the effect of adding a mouse over or clicking to follow to move to the corresponding tab? Just think about it. Please ~

Css
Mar.22,2021

I was actually amused by the title. The angle of the two sides is not a triangle. Then with regard to your need, take a look at the pseudo-class.

pseudo-class, a:: before, a:: after, you can refer to Baidu News Home the style change of the hover switch button

solid triangle you should know, it is actually two solid triangles, a gray one and a white triangle, and the white triangle blocks the gray triangle. There is only a gray corner border left to OK

https://codepen.io/vizocn/pen.

Thirty guests-set triangles with only two sides in CSS

can be implemented with triangles and two pseudo classes, as shown in the above implementation! 

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 -sharpccc;
            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 -sharpfff;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
        }

you can consider using pseudo classes to implement:: before +:: after + location processing

is equivalent to a menu

should be made into one line

the css style name controls the display and hiding of the symbols on the right (plus a class display, otherwise hidden)

if you want to make a slide animation, it is not suitable to do every line. Instead, you should use the mouse event to calculate the corresponding position on the outer layer of the label, and dynamically modify the CSS parameter value

.

to achieve the display style of this element, you can use a DIV, set width and height, as long as two borders, rotate 45 degrees, absolutely locate to the right

Previous: Vue switching class encountered a problem, can not each switch together?

Next: How to use CSS to achieve this effect?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b420ed-2b946.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b420ed-2b946.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?