如何在css中使右侧倾斜？

Question

I want to make background for menu list item looks as a tab, how can this be done in CSS and to add icon beside it

CSS

#cdnavheader .activeMenuItem span {
background-position: 100% -145px;
color: #2d83ab;
padding: 12px;
background-repeat: no-repeat;
color: #fff;
background-color: #2d489b;
border-top-left-radius: 5px;
border-top-right-radius: 5px;

}

Answer 1

You can also use a pseudo and transform:

 a { display: inline-block;/* fallback*/ position: relative; overflow: hidden; border-radius:5px 5px 0 0; padding: 1em 3em 1em 2em; } a:before { content: ''; position: absolute; top: 0; right: 0; width: 120%; height: 200%; z-index: -1; background: tomato; border-radius:inherit; transform: skew(35deg) } nav { display: flex; margin: 1em; }

 <nav><a href="#"> some link</a> <a href="#"> some link</a> <a href="#"> some link</a> </nav>

Answer 2

Use a zero height DIV with a big border:

 .tab { width: 100px; height: 0px; border-right: 20px solid transparent; border-bottom: 20px solid green; }

 <div class="tab"></div>

More info here: https://css-tricks.com/snippets/css/css-triangle/