如何將一個css三角形垂直對齊一個響應矩形

Question

我創建了一個響應矩形和一個只響應css的響應三角形。 如何對齊三角形，使其始終垂直居中在盒子的右側？ 我想用css來做，但如果不可能，我會欣​​賞任何提示替代選項。

HTML：

<div class="container"> 
    <div class="box green rightbox"> 
    <div class="innerbox">Lorem ipsum....</div> 
    </div> 
<div class="mother-triangle"> 
    <div class="triangle-right green"></div> 
</div> 
</div> 

CSS：

.container { 
max-width: 1200px; 
margin-right: auto; 
margin-left: auto; 
z-index: 1; 
position: relative; 
} 
.box { 
height: auto!important; 
min-height: 300px; 
} 
.box.green { 
background-color: rgba(51, 223, 9, 0.75)!important; 
} 
.innerbox { 
padding: 12px; 
} 
.triangle-right { 
width: 0; 
height: 0; 
padding-top: 10%; 
padding-bottom: 10%; 
padding-left: 10%; 
overflow: hidden; 
    position: relative; 
    margin-top: auto; 
    margin-bottom: auto; 
    display: inline-block; 
    vertical-align: middle; 
} 
.triangle-right:after { 
content: ""; 
display: block; 
width: 0; 
height: 0; 
margin-top: -500px; 
    margin-left: -500px; 
    border-top: 500px solid transparent; 
border-bottom: 500px solid transparent; 
border-left: 500px solid rgba(51, 223, 9, 0.75);  
} 
.rightbox { 
    width: 90%; 
    float: left; 
} 

JSFiddel demo:

Answer 1

您可以使用絕對定位來做到這一點。

1. 在.triangle右只要改變position: relative到position: absolute。
2. 添加top: 50%將三角形移動到垂直中間。

Updated fiddle

.container { 
 
    max-width: 1200px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    z-index: 1; 
 
    position: relative; 
 
} 
 
.box { 
 
    height: auto!important; 
 
    min-height: 300px; 
 
} 
 
.box.green { 
 
    background-color: rgba(51, 223, 9, 0.75)!important; 
 
} 
 
.innerbox { 
 
    padding: 12px; 
 
} 
 
.triangle-right { 
 
    width: 0; 
 
    height: 0; 
 
    padding-top: 10%; 
 
    padding-bottom: 10%; 
 
    padding-left: 10%; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    margin-top: auto; 
 
    margin-bottom: auto; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    top: 50%; 
 
} 
 
.triangle-right:after { 
 
    position: absolute; 
 
    content: ""; 
 
    display: block; 
 
    width: 0; 
 
    height: 0; 
 
    margin-top: -500px; 
 
    margin-left: -500px; 
 
    border-top: 500px solid transparent; 
 
    border-bottom: 500px solid transparent; 
 
    border-left: 500px solid rgba(51, 223, 9, 0.75); 
 
} 
 
.rightbox { 
 
    width: 90%; 
 
    float: left; 
 
}

<!-----container start----> 
 
<div class="container"> 
 
    <div class="box green rightbox"> 
 
    <div class="innerbox">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
    </div> 
 
    <div class="mother-triangle"> 
 
    <div class="triangle-right green"></div> 
 
    </div> 
 

 

 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 

 
</div> 
 
<!-----container end ---->