Reputation: 443
I'm looking for a way to set border widths of the bottom(green) shape so it's always forming a triangle pointing down - something like percentages with border-left and border-right to 50%. Height should stay the same. Any ideas how to implement this? Here's a pen as well: https://codepen.io/anon/pen/yPMNPZ
.par {
width: 320px;
height: 500px;
background-color: lightgrey;
}
#container {
background-color: #ccc;
position: relative;
}
#container::after {
border-top: 50px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
bottom: -550px;
content: "";
position: absolute;
width: 100%;
}
<div class="par">
<div id="container"></div>
</div>
Upvotes: 0
Views: 107
Reputation: 1861
Hope this helps you.
.par {
width: 320px;
height: 500px;
background-color: lightgrey;
}
#container {
background-color: #ccc;
position: relative;
height:100%;
}
#container:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: green;
border-width: 160px;
margin-left: -160px;
}
<div class="par">
<div id="container"></div>
</div>
Upvotes: 1
Reputation: 443
Managed to do it with few media queries. If width is 320px, apply these styles to #container::after:, increase as needed
border-left: 160px solid transparent;
border-right: 160px solid transparent;
width: 84%;
Upvotes: 0
Reputation: 562
Not Sure if I understood your question. But are you looking for this? Below code added:
.par {
width: 320px;
height: 500px;
background-color: lightgrey;
}
#container {
background-color: #ccc;
position: relative;
}
#container::after {
border-top: 50px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
bottom: -599px;
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 100px 160px 0 160px;
}
<div class="par">
<div id="container"></div>
</div>
Upvotes: 2
Reputation: 6639
#container::after {
border-top: 50px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
bottom: -550px;
content: "";
position: absolute;
width: calc(100% - 120px);
}
Please update the pseudo element after to this
width: calc(100% - 120px);
Here is the code pen link https://codepen.io/iamlalit/full/YEZXBx/
Upvotes: 0