Html/Css擬似要素を含む三角形

Question

擬似要素で三角形を作成しようとしています。下の画像のようなものです。

しかし、これは私が得るものです。

これまで私がこれまで試みてきたのはこれです。

.container .form--container:before { 
    content: ""; 
    position: absolute; 
    top: 0px; 
    left: 130px; 
    width: 28px; 
    height: 28px; 
    transform: translate(-1rem, -100%); 
    border-left: 1.5rem solid #979797; 
    border-right: 1.5rem solid #979797; 
    border-bottom: 1.5rem solid white; 
} 

Answer 1

問題はボーダーの使用によるものです。このリンクHow do CSS triangles work?を確認すると、ボーダーの仕組みや、なぜこの出力が得られるのか理解できます。

代替ソリューションは、このように回転と国境を使用することです：

.box { 
 
    border: 1px solid; 
 
    margin: 50px; 
 
    height: 50px; 
 
    position:relative; 
 
    background: #f2f2f5; 
 
} 
 

 
.box:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-top: 1px solid; 
 
    border-left: 1px solid; 
 
    top: -11px; 
 
    left: 13px; 
 
    background: #f2f2f5; 
 
    transform: rotate(45deg); 
 
}

<div class="box"> 
 

 
</div>

そして、あなたは矢印を使用してボックスを透明にしたい場合は、ここでは別のですこれを達成するためのトリック（上記の解決策は、背景としての単色を考慮するものである）：

body { 
 
margin:0; 
 
background-image:linear-gradient(to right,yellow,pink); 
 
} 
 

 
.box { 
 
    border: 1px solid; 
 
    border-top:transparent; /*make border-top transparent*/ 
 
    margin: 50px; 
 
    height: 50px; 
 
    position:relative; 
 
} 
 

 
.box:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-top: 1px solid ; 
 
    border-left: 1px solid; 
 
    top: -11px; 
 
    left: 13px; 
 
    transform: rotate(45deg); 
 
} 
 
/* Use after element to mimic the border top with a gap using linear gradient*/ 
 
.box:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left:0; 
 
    right:0; 
 
    height: 1px; 
 
    background-image:linear-gradient(to right,black 10px,transparent 10px,transparent 39px,black 39px); 
 
}

<div class="box"> 
 

 
</div>