如何将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-right 中将position: relative更改为position: absolute即可。
2. 添加top: 50%将三角形移动到垂直中间。

Updated fiddle

＆＃13;
＆＃13;
.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;
}
＆＃13;
<!-----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 ---->
＆＃13;
＆＃13;
＆＃13;