CODEWITHSUNDEEP
htmlcsscss-shapes
DevJoe
DevJoe

Reputation: 443

Set border widths of the CSS shape to always form a triangle

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

Answers (4)

PraveenKumar
PraveenKumar

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

DevJoe
DevJoe

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

All about JS
All about JS

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

Lalit Sachdeva
Lalit Sachdeva

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

Related Questions