如何使css中的右側傾斜？

-2

我要讓背景菜單列表項看起來就像一個標籤，這怎麼能在CSS來完成，並添加它如何使css中的右側傾斜？

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;

}

來源

2017-09-27 NewDeveloper

那麼，你嘗試過什麼？ –

你嘗試過什麼嗎？ StackOverflow不是一個Web服務提供者。 –

在[所以]你應該嘗試**自己編寫代碼**。後** [做更多的研究]（//meta.stackoverflow.com/questions/261592)**如果你有問題，你可以**發佈你已經嘗試**與清楚的解釋是什麼是'工作**並提供[** Minimal，Complete和Verifiable示例**]（// stackoverflow.com/help/mcve）。我建議閱讀[問]一個好問題和[完美問題]（http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/）。另外，一定要參加[遊覽]並閱讀[this]（// meta.stackoverflow.com/questions/347937/)**。 –

使用旁邊的圖標零高度DIV有一個大邊界：

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

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

此處瞭解詳情：https://css-tricks.com/snippets/css/css-triangle/

來源

2017-09-27 12:00:51

OP正在尋找一個圓角三角形。你提供的那個有鋒利的邊緣。我認爲這裏需要SVG。 – Maharkus

你也可以使用一個僞和改造：

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>

來源

2017-09-27 12:07:11

如何使css中的右側傾斜？

回答

相關問題