3

CSSを使用して白い境界線で三角形を作成するにはどうすればよいですか？下の画像のように。

ここに画像の説明を入力してください

このCSSを追加すると

.triangle {
    width:0;
    height:0;
    border-top: 20px solid transparent; 
    border-left: 20px solid white; 
    border-bottom: 20px solid transparent;
    position:relative;

}
.triangle:before {
    content:'';
    width:0;
    height:0;
    border-top: 10px solid transparent; 
    border-left: 10px solid red; 
    border-bottom: 10px solid transparent;
    position:absolute;
    top:-10px;
    left:-17px;
}

結果は

ここに画像の説明を入力してください

4

1 に答える 1

1

CSS：

.triangle {
    width:0;
    height:0;
    border-top: 20px solid transparent; 
    border-left: 20px solid white; 
    border-bottom: 20px solid transparent;
    position:relative;

}
.triangle:before {
    content:'';
    width:0;
    height:0;
    border-top: 10px solid transparent; 
    border-left: 10px solid red; 
    border-bottom: 10px solid transparent;
    position:absolute;
    top:-10px;
    left:-17px;
}

HTML：

<div class="triangle"></div>

フィドル

于 2013-02-16T10:33:50.263 に答える