div의 오른쪽 테두리에 CSS 각도가 매겨진

Question

아래 그림처럼 급하게 맞춰진 것처럼 오른쪽 테두리가있는 3 ~ 4 개의 DIVS로 구성된 메뉴를 만들려고합니다.

<div class="youarehere"> 
     <div class="yah_1">You are here</div> 
     <div class="yah_1">xxx</div> 
     <div class="yah_1">yyy/div> 
     <div class="yah_2">sss</div> 
    </div> 

yah_1가 직각 테두리와 yah_2 그냥 국경없는 것있을 것입니다 :

HTML과 같을 것이다.

테두리 반경이 분명히 나에게 곡선 효과를 주지만, 나는 각을 기울이고 싶습니다. 나는 수많은 CSS 예제를 온라인에서 보았지만 아무도 나에게이 효과를주지 못했다.

Answer 1

가짜 요소를 사용해보십시오. :after처럼. CSS Pseudo-elements

짧은 설명 :

나는 :after - 요소를 생성하고 border 오른쪽 상단으로 회전했습니다. 이 후, 나는 그것을 스타일링 CSS를 만들었습니다.

.youarehere>.yah_1, 
 
.youarehere>.yah_2 { 
 
    display: inline; 
 
    border: 1px solid black; 
 
    position: relative; 
 
    padding-right: 10px; 
 
    padding-left: 5px; 
 
    margin-left: -4px; 
 
    border-left: none; 
 
    border-right: none; 
 
} 
 

 
.youarehere>.yah_1::after { 
 
    content: " "; 
 
    border-right: 1px solid black; 
 
    border-top: 1px solid black; 
 
    transform: rotate(45deg); 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 3px; 
 
    height: 13px; 
 
    width: 13px; 
 
} 
 

 
.youarehere>.yah_1:first-child { 
 
    border-left: 1px solid black; 
 
} 
 

 
.youarehere>.yah_2 { 
 
    border-right: 1px solid black; 
 
}

<div class="youarehere"> 
 
    <div class="yah_1">You are here</div> 
 
    <div class="yah_1">xxx</div> 
 
    <div class="yah_1">yyy</div> 
 
    <div class="yah_2">sss</div> 
 
</div>

:before

Answer 2

일반적인 프로세스는 다음과 같습니다

1. 당신의 사용을 만들 수있는 의사 요소를 만듭니다. 이는 CSS에 :before 또는 :after 선택 자 (예 : .yah_1:after { /* style element here... */ })를 사용하는 것을 의미합니다.

2. 허위 (숨겨진) 내용, 크기 및 여백을 지정하여 의사 요소의 스타일을 지정합니다. 삼각형이됩니다. 더 많은 것을 읽으려면 in this article 값을 조정 해보십시오.

3. 삼각형을 그 요소의 오른쪽에 배치하십시오. 이 작업을 수행하는 한 가지 방법은 .yah_1 { position: relative; }을 설정 한 다음 위/왼쪽/아래/오른쪽 속성과 함께 유사 요소에 position: absolute;을 사용하여 위치를 지정할 수 있습니다.

4. 삼각형을 제거하려면 마지막 항목에 다른 클래스가 필요하지 않습니다. .yah_1:last-child:after { display: none; }을 사용하여 스타일을 무시하십시오. 마지막 요소를 제외한 모든 요소에 삼각형이 남습니다.

Answer 3

사용 및 border 및 border-left와 함께 :after 의사 요소는 기울어 진 링크를 만들려면 다음

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 

 
.nav { 
 
    list-style-type: none; 
 
    padding-left: 0; 
 
    display: flex; 
 
    padding: 0; 
 
    border: 3px solid #33691e; 
 
} 
 

 
.nav-li { 
 
    background: #aed581; 
 
    padding: .5rem 1rem .5rem 2rem; 
 
    position: relative; 
 
    transition: all .2s; 
 
} 
 

 
.nav-li:hover { 
 
    background: #8bc34a; 
 
} 
 

 
.nav-li:hover::after { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    content: ""; 
 
    display: inline-block; 
 
    border: 17px solid transparent; 
 
    border-left: 10px solid #8bc34a; 
 
    border-right: 0; 
 
    margin-right: -10px; 
 
} 
 

 
.nav-li:first-child { 
 
    padding: .5rem 1rem; 
 
} 
 

 
.nav-li:not(:last-child) { 
 
    margin-right: 10px; 
 
} 
 

 
.nav-li:after { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    content: ""; 
 
    display: inline-block; 
 
    border: 17px solid transparent; 
 
    border-left: 10px solid #aed581; 
 
    border-right: 0; 
 
    margin-right: -10px; 
 
    transition: all .2s; 
 
} 
 

 
.nav-li:not(:first-child):before { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    content: ""; 
 
    display: inline-block; 
 
    border: 17px solid transparent; 
 
    border-left: 10px solid white; 
 
    border-right: 0; 
 
}

<ul class="nav"> 
 
    <li class="nav-li">Link 1</li> 
 
    <li class="nav-li">Link 2</li> 
 
    <li class="nav-li">Link 3</li> 
 
    <li class="nav-li">Link 4</li> 
 
</ul>

Answer 4

https://codepen.io/UI-UXDeveloper/pen/jYBRLp

</style> 
    .youarehere .item { 
    display:inline-block; 
    border:2px solid #333; 
    border-width:2px 0px;background-color:transparent; 
    margin:0px 0px 0px 0px;padding:5px 12px 5px 23px;float:left;cursor:pointer; 
    position:relative; 
} 
.youarehere .item:hover{background-color:#ccc;} 
.youarehere .item:first-child{border-left:2px solid #000;padding-left:12px;} 
.youarehere .item .rightTriangle{ 
position: absolute; 
    right: -11px; 
    top: -1px; 
    width: 0; 
    height: 0; 
    border-left: 12px solid #ffffff; 
    border-top: 15px solid transparent; 
    border-bottom: 15px solid transparent; 
    z-index: 9; 
} 
.youarehere .item:hover .rightTriangle{border-left: 12px solid #ccc;} 
.youarehere .item:after{ 
     content: ""; 
    position: absolute; 
    right: -15px; 
    top: -2px; 
    width: 0; 
    height: 0; 
    border-left: 15px solid #000; 
    border-top: 16px solid transparent; 
    border-bottom: 16px solid transparent; 
} 
</style> 


    <div class="youarehere"> 
    <div class="yah_1 item">You are here<div class="rightTriangle"></div></div> 
     <div class="yah_1 item">xxx<div class="rightTriangle"></div></div> 
     <div class="yah_1 item">yyy<div class="rightTriangle"></div></div> 
     <div class="yah_2 item">sss<div class="rightTriangle"></div></div> 
    </div> 

https://codepen.io/UI-UXDeveloper/pen/jYBRLp