CSS, 인 flexbox, CSS 그리드, 테두리, 나는이 상황이 내 자식 DIV

Question

에 의해 부모 국경을 덮어 씁니다.

어떻게하면됩니까?

코드 :

<div class="container"> 
    <div class="triangle">How are you ?</div> 
</div> 

.container { 
    border: 1px solid gray; 
    position: relative; 
    width: 50vw; 
    height: 100px; 
    background: #fff; 
    overflow: hidden; 
} 

.triangle { 
    background-color: red; 
    display: inline-block; 
    transform: translateX(-50%) rotate(45deg) translateX(50%) rotate(-90deg); 
    transform-origin: center top; 
    box-shadow: 0px -50px 0px 50px red; 
} 

Answer 1

당신은 그렇게 할 의사를 사용하고, 단순히 음의 여백으로 triangle를 이동할 수 있습니다.

또한 overflow: hidden을 triangle으로 옮겼습니다. 테두리가 겹치지 않습니다.

참고,이 샘플 두꺼운 테두리를 사용, 그래서 당신은 의사 가능한 것보다 더 많은 일을하려는 경우 하나는 쉽게이

.container { 
 
    border: 5px solid gray; 
 
    position: relative; 
 
    width: 50vw; 
 
    height: 80px; 
 
    background: #fff; 
 
} 
 
.triangle { 
 
    display: inline-block; 
 
    height: calc(100% + 10px);  /* 10px = border size * 2    */ 
 
    margin: -5px 0 0 -5px;   /* move element left/top = border size */ 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
.triangle::before { 
 
    content: attr(data-text); 
 
    display: inline-block; 
 
    background-color: red; 
 
    transform: translateX(-50%) rotate(45deg) translateX(50%) rotate(-90deg); 
 
    transform-origin: center top; 
 
    box-shadow: 0px -50px 0px 50px red; 
 
}

<div class="container"> 
 
    <div class="triangle" data-text="How ?"></div> 
 
</div> 
 
<br> 
 
<div class="container"> 
 
    <div class="triangle" data-text="How are you ?"></div> 
 
</div>

작동 볼 수 있습니다 물론 여기에 a 요소를 추가 할 수 있습니다. span

이 샘플에서는 음수 여백 대신 상대 위치를 사용했습니다. sh 아야 또 다른 방법.

.container { 
 
    border: 5px solid gray; 
 
    position: relative; 
 
    width: 50vw; 
 
    height: 80px; 
 
    background: #fff; 
 
} 
 
.triangle { 
 
    display: inline-block; 
 
    position: relative; 
 
    left: -5px;      /* move element left = border size */ 
 
    top: -5px;      /* move element top = border size */ 
 
    height: calc(100% + 10px);  /* 10px = border size * 2   */ 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
.triangle span { 
 
    display: inline-block; 
 
    background-color: red; 
 
    transform: translateX(-50%) rotate(45deg) translateX(50%) rotate(-90deg); 
 
    transform-origin: center top; 
 
    box-shadow: 0px -50px 0px 50px red; 
 
}

<div class="container"> 
 
    <div class="triangle"> 
 
    <span>How ?</span> 
 
    </div> 
 
</div> 
 
<br> 
 
<div class="container"> 
 
    <div class="triangle"> 
 
    <span>How are you ?</span> 
 
    </div> 
 
</div>

또한

Answer 2

당신은 대신 경계에 대한 box-shadow를 사용할 수 있습니다.

.container { 
 
    
 
    position: relative; 
 
    width: 50vw; 
 
    height: 100px; 
 
    background: #fff; 
 
    overflow: hidden; 
 
    box-shadow: inset 0 0 0 1px gray; 
 
} 
 

 
.triangle { 
 
    background-color: red; 
 
    display: inline-block; 
 
    transform: translateX(-50%) rotate(45deg) translateX(50%) rotate(-90deg); 
 
    transform-origin: center top; 
 
    box-shadow: 0px -50px 0px 50px red; 
 
}

<div class="container"> 
 
    <div class="triangle">How are you ?</div> 
 
</div>