4

最近、CSS と HTML を使用して三角形の div の外観を作成する方法を学びました。ここで、三角形の div のいずれかの辺に境界線を追加できるかどうかを知りたいです。そのため、div に白い背景と黒い境界線を指定した場合でも、それを見ることができますか? これを行う方法はありますか？

JSFIDDLE: http://jsfiddle.net/c75KM/1/

HTML:

<div class="arrow-up"></div>

CSS:

.arrow-up {
width: 0; 
height: 0; 
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}
4

1 に答える 1

6

これを行う典型的な方法は次のとおりです。

JSFiddle

.arrow-up:after {
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    margin-top:1px;
    margin-left:2px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
}

.arrow-up:before {
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid black;
}
于 2013-02-26T06:51:14.933 に答える