'How can I make a CSS triangle the same height as it's parent element?
I'm trying to match this layout here:

I want one section with an equal split. The left side has a background color and the other does not. This issue I'm running into is that I want the triangle that is attached to the left side the SAME height as the element itself. If I give it a set height then additional/newer content will throw this off. How can I make this happen? Here is what I'm working with:
<section class='panel panel--standard u-bgColorSplitForm service-cta'>
<div class="container">
<?php if (have_rows('service_cta_group')) :
while (have_rows('service_cta_group')) : the_row();
$kicker = get_sub_field('kicker');
$headline = get_sub_field('headline');
$copy = get_sub_field('copy');
$form_header = get_sub_field('form_header');
$form_id = get_sub_field('form_id');
?>
<div class="grid">
<div class="grid__col--6 split-left">
<h4><?php echo $kicker; ?></h4>
<h3><?php echo $headline; ?></h3>
<p><?php echo $copy; ?></p>
</div>
<div class="grid__col--6">
<!-- Form will be added here -->
</div>
</div>
</div>
<?php endwhile;
endif; ?>
</section>
.service-cta {
position: relative;
h4 {
font-family: $font-stack-secondary;
font-style: italic;
}
h3 {
font-weight: 400;
}
}
.split-left {
position: relative;
// triangle
&::after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
right: -100px;
z-index: 1;
border-top: 120px solid transparent;
border-left: 75px solid $color-primary-tint;
border-bottom: 120px solid transparent;
transition: $transition-base;
@include create-mq($md-width) {
border-top: 150px solid transparent;
border-left: 100px solid $color-primary-tint;
border-bottom: 150px solid transparent;
}
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
