How Do You Form An Object Using Different Shapes in CSS? - css

Question

I am currently experimenting on CSS shapes and I am making an icon that forms like a circle with a NECKTIE. I am combining 2 different triangles but it's really hard to form because I am really bad at imagining shapes and forms.
Here is my source code:
.upper {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 22px solid #353332;
transform: rotate(76deg);
position: relative;
}
.upper::before {
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 14px solid #EEE328;
transform: rotate(0deg);
top: 5px;
bottom: 9px;
left: -7px;
}
.lower {
width: 0;
height: 0;
border-bottom: 27px solid #353332;
border-right: 17px solid transparent;
transform: rotate(-31deg);
margin-top: -17px;
margin-left: 14px;
}
.lower::before {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 27px solid #EEE328;
border-right: 17px solid transparent;
transform: rotate(-31deg);
transform: rotate(0deg);
top: 5px;
bottom: 9px;
left: -7px;
}
<div class="neck-tie">
<div class="upper"></div>
<div class="lower"></div>
</div>
I put everything in a container. The .upper class is the bigger triangle with 3 equal sides and the .lower class is the longer one. I added a ::before in each of the classes since I wanted it to be bordered.
My main div is rotated 19deg. I'm not posting everything in here so that you can understand how my code works. I will just explain what's inside my files.

Answer 1

Just playing around I came up with this it isn't anything like your code but I think I captured what you want. I used several divs with absolute positioning and rotated 3 divs one to give the appearance of the upper portion of the tie and 2 to give the appearance of the lower portion.
.tieContainer{
width:100px;
height:250px;
position:absolute;
left:50%;
margin-left:-50px;
top:10px;
overflow:hidden;
transform: rotate(180deg);
}
.tieTopContainer{
width:100%;
height:60px;
overflow:hidden;
}
.tieTop{
width:60px;
height:160px;
transform: rotate(45deg);
overflow:hidden;
background-color:yellow;
margin-left:-20px;
margin-top:15px;
border:5px black solid;
}
.tieBottomContainer{
width:100%;
height:134px;
overflow:hidden;
}
.tieBottom{
width:70px;;
height:170px;
background-color:yellow;
margin-left:16px;
}
.trimRight{
width:80px;
height:152px;
position:absolute;
transform: rotate(15deg);
background-color:#ffffff;
border-left:6px black solid;
margin-left:67px;
margin-top:7px;
}
.trimLeft{
width:80px;
height:152px;
position:absolute;
transform: rotate(-15deg);
background-color:#ffffff;
border-right:6px black solid;
margin-left:-52px;
margin-top:7px;
}
.knotCon{
width:40px;
height:30px;
overflow:hidden;
border-bottom:5px black solid;
position:absolute;
left:50%;
margin-left:-20px;
}
.knot{
width:60px;
height:160px;
transform: rotate(45deg);
overflow:hidden;
background-color:yellow;
margin-left:-50px;
margin-top:9px;
border:5px black solid;
}
<div class="tieContainer">
<div class="tieTopContainer">
<div class="tieTop"></div>
</div>
<div class="tieBottomContainer">
<div class="trimRight"></div>
<div class="trimLeft"></div>
<div class="tieBottom"></div>
</div>
<div class="knotCon">
<div class="knot"></div>
</div>
</div>