I would like to create a triangle like the one below:
however, I’m not quite sure how to get the triangle between the divs.
Here’s the code I currently have:
.container {
display: flex;
flex-direction: row;
align-content: center;
}
.box {
height: 50px;
width: 50%;
background-color: #ddd;
border: 1px solid red;
}<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>>Solution :
There must be better ways, but I usually do something along these lines:
.container {
display: flex;
flex-direction: row;
align-content: center;
}
.box {
height: 50px;
width: 50%;
background-color: #ddd;
border: 1px solid red;
}
.triangle {
position: relative;
}
.triangle::before {
content: "";
width: 10px;
height: 10px;
border-top: 2px solid red;
border-right: 2px solid red;
background: #ddd;
transform: rotate(45deg);
position: absolute;
top: 50%;
right: -7px;
margin-top: -5px;
}<div class="container">
<div class="box triangle"></div>
<div class="box"></div>
</div>