右サイドを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)**あなたが問題を抱えていると、あなたが試みたものを投稿することができます** （** stackoverflow.com/help/mcve）を提供しています。私は良い質問と[完璧な質問]を読むことをお勧めします（http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/）。また、[ツアー]を取って** [this]（// meta.stackoverflow.com/questions/347937/)**を必ず読んでください。 –

使用してAその横にアイコンを追加する方法を、タブとして見えます大きな境界線との高さゼロの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斜めにするには？

答えて

関連する問題