最終更新日:2018年8月29日 11時15分閲覧回数:583

Bootstrap 3 でキリトリセンを作る

glyphicon のハサミを使った「切り取り線」。 ポイントは、ハサミをちょっと回転させて、背景色をつけること。 閑話休題ないし Cut the C**p といった用途に適しているかも知れない。

表示例

テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト
キリトリセン
テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト

書き方

CSS

.cut-here {
    margin: 1em 0;
    position: relative;
    border-bottom :1px dashed #666
}

.cut-here .small {
    position: absolute;
    color: #666;
    background-color :#fff;
    left: 48%;
    top: -.4em;
    transform: rotate(20deg)
}

.cut-here .small+small {
    position: absolute;
    color: #666;
    background-color: #fff;
    left: 50%;
    top: -.9em;
}

HTML

<div class=cut-here>
<span class="glyphicon glyphicon-scissors small"></span>
<small>キリトリセン</small>
</div>

コメント

当フォームより収集される個人情報は、返信を要する際に使用されるものであり、法令に基づく行政機関等への提供を除き、ご本人の同意を得ずに第三者に提供することはありません。また、コメントが掲載される場合であってもメールアドレスが本サイト内に記載されることはありません。