New サムネイル Pythonの高階関数reduceの使い方:gcdを使って3つ以上の最大公約数を求めてみよう New サムネイル 草冠に祭りと書いて「蔡」の読み方と画数 New サムネイル 草を分けると書く「芬」の読み方と画数:「芬」はフィンランドの漢字表記「芬蘭」に使われる

CSSでリボンをデザインする(裏に折りこまれている・ふわっと浮いた感じ)

広告

CSS でリボンをデザインしました。

リボン

☆HTML

<div class="ribbon-wrapper">
    <a class="ribbon" href="">仕事</a>
</div>

☆CSS

.ribbon-wrapper {
    padding: 16px 0;
    position: relative;
    width: 160px;
}

.ribbon {
    background: #70a6ff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 0 -8px;
    padding: 16px 10px;
    position: relative;
}

.ribbon:before {
    border: none;
    border-bottom: solid 8px transparent;
    border-right: solid 8px #6081b7;
    content: '';
    left: 0;
    position: absolute;
    top: 100%;
}

親要素をリボンのラッパー、小要素にリボンを設定します。

  • リボンのラッパーの position を relative にする
  • リボンそのものも relative にする
  • リボンの幅はラッパーで設定する
  • リボンの折り目は before を設定する

広告

広告

広告

コンピューター コンピューター
プログラミング プログラミング
数学 数学
英語 英語
国語 国語
理科 理科
社会 社会

Python入門

Python入門

化学入門

化学入門

漢字辞典

漢字辞典

整数辞典

漢字辞典

Lord Candy

Lord Candy