의사 요소가있는 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>