完全な境界線の三角形のdivを作成する

Question

（黒い）境界線を持つ左上三角形（赤色）を作成しようとしています。私はそれが黒い国境を周りにしたいと思っています。この試みは、私は私の試みは

#corner { 
 
    height: 75px; 
 
    width: 100px; 
 
    position: absolute; 
 
    left: -3em; top: -2em; 
 
    z-index: 999; 
 
    transform: rotateZ(-45deg); 
 
    background-color: red; 
 
    border-bottom: 5px solid #0c0c0c; 
 
}

<div id="corner"></div>

を動作しませんここで、すべての方法の周りに境界線が欲しい（三角形をmimmickするには、画面の外にプッシュされ）それ偽物

に四角形を角度

Answer 1

三角形を作成する簡単な方法があります。an element with a width/height of 0を使用することができます。

そして、あなたが望む国境のため、アイデアは多分次のスニペットを見て、2つの異なる色と異なるサイズで2つの重複三角形を持つことです。

.triangle-up-left-1 { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid rgb(246, 85, 85); 
 
    border-right: 50px solid transparent; 
 
    z-index:2; 
 
    position:absolute; 
 
    top:5px; 
 
    left:13px; 
 
} 
 
.triangle-up-left-2 { 
 
    width: 0; 
 
    height: 0; 
 
    position:absolute; 
 
    top:0; 
 
    border-top: 68px solid rgb(0, 0, 0); 
 
    border-right: 68px solid transparent; 
 
    z-index:1: 
 
}

<div class="triangle-up-left-1"></div> 
 
<div class="triangle-up-left-2"></div>

Answer 2

あなたはhttps://css-tricks.com/examples/ShapesOfCSS/

2つを結合してマージンを置いて配置しようとしたので、境界線で見えるようになりました。おそらくこれがあなたのための解決策です。乾杯。

.triangle1 { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 100px solid black; 
 
    border-right: 100px solid transparent; 
 
} 
 
.triangle2 { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 82px solid red; 
 
    border-right: 82px solid transparent; 
 
    position: absolute; 
 
    margin-top: -95px; 
 
    margin-left: 5px; 
 
}

<div class="triangle1"> 
 
    <div class="triangle2"></div> 
 
</div>

の