CODEWITHSUNDEEP
htmlcssfrontend
OnionSoap
OnionSoap

Reputation: 85

How to make overlapping triangles

I've been backtracking through old CSS battle targets the past couple days and I'm having trouble with #14. The code requires you to make 2 triangles that partially overlap so that one side of the lower triangle is sticking out from behind the front. Here's a link to the target.

Here's my code:

* {
  background: #F2F2B6;
}

div {
  position: absolute;
}

#a {
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 130px solid #FF6D00;
  left: 190px;
  top: 85px;
}

#b {
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 130px solid #FD4602;
  top: 85px;
  left: 170px;
}
<div id="a"></div>
<div id="b"></div>
<div id="c">
  <div id="d"></div>
</div>

The problem with this method is that the transparent border-sides still take precedence over the triangle in the back. I've tried using z-index and stacking the divs as parents/children but I can't seem to work around it.

Much appreciated, in advance

Upvotes: 1

Views: 306

Answers (3)

Temani Afif
Temani Afif

Reputation: 272891

another idea using less of code and relying on clip and filter:

.triangle {
  width: 150px;
  display:inline-block;
  position: relative;
  filter: drop-shadow(20px 0 0 #FD4602);
}
.alt {
  transform:scaleY(-1);
}
.triangle:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #FF6D00;
}

.triangle::before {
  content: "";
  display: block;
  padding-top: 82%;
}
<div class="triangle"></div>

<div class="triangle alt"></div>

Upvotes: 0

sol
sol

Reputation: 22939

You could try something with two parallelograms

body {
  background: #F2F2B6;
  display: grid;
  place-content: center;
  min-height: 100vh;
}

div {
  background: linear-gradient(138deg, #FD4602 42%, transparent 42%, transparent 58%, #FF6D00 58%);
  height: 120px;
  transform: skew(25deg);
  width: 180px;
}

div:before {
  background: linear-gradient(138deg, #FF6D00 42%, transparent 42%, transparent 58%, #FD4602 58%);
  content: '';
  position: absolute;
  left: -16px;
  width: inherit;
  height: inherit;
}
<div></div>

Upvotes: 0

Karl L
Karl L

Reputation: 1725

So basically, you may need a wrapper for the triangle pair and make it position:relative this would act as the anchor point since we would want the children to be positioned fixed or absolute but with different placements by left

Here is my take: (just change the margins to your desire)

body {
  background: #F2F2B6
}

.group {
  position: relative;
  width: 120px;
  height: 135px;
  float: left;
}

.invtr {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 130px 75px 0 75px;
  border-color: #FD4602 transparent transparent transparent;
  position: absolute
}

.invtr2 {
  border-color: #FF6D00 transparent transparent transparent;
  left: 16px;
}

.tr {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 75px 130px 75px;
  border-color: transparent transparent #FF6D00 transparent;
  position: absolute;
}

.tr.tr2 {
  border-color: transparent transparent #FD4602 transparent;
  left: 16px;
}
<div class="group">

  <div class="invtr">
  </div>
  <div class="invtr invtr2">
  </div>

</div>


<div class="group">

  <div class="tr">
  </div>
  <div class="tr tr2">
  </div>

</div>

Upvotes: 2

Related Questions