What is the Process for Creating an Object with Various Shapes using CSS?

Currently, I am delving into CSS shapes and attempting to create an icon in the shape of a circle with a necktie. This involves combining two different triangles, but visualizing these shapes has proven challenging for me.

Below is the source code I have been working on:

.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>

The "upper" class represents the larger triangle with three equal sides, while the "lower" class signifies the longer one. By utilizing the "::before" pseudo-element in each class, I aimed to create borders around them. The main container div is rotated by 19 degrees to achieve the desired effect. For brevity, I have only provided snippets of my code here, focusing instead on explaining its structure and logic.

css

Answer №1

After some experimentation, I managed to create a design that may not resemble your code but captures the essence of what you are looking for. Utilizing multiple div elements with absolute positioning, I rotated three divs - one for the upper part of the tie and two for the lower part.

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the :root selector truly devoid of value?

While I understand that :root can be used to select the html tag in an HTML file and the svg tag in an SVG file, I personally find it strange and not practical to apply the same styles to both HTML and SVG using :root. It seems like an unrealistic scenario ...

htmlcsscss-selectorspseudo-class

The parent div isn't properly extending to accommodate the table, and the columns aren't aligning correctly within the table when using CSS flexbox

I have a scenario where I need a table inside a div to take up the entire space of the div, with the second column and its inputs expanding as much as possible to fill the width (i.e. col1+col2 = div width). Due to being nested within another div, absolut ...

htmlcsshtml-tableflexbox

Creating a dynamic background color that pulses with animation

I recently created a script to animate the menu li element when hovering over the corresponding a element. Everything is functioning as expected, but now I'm looking to enhance the effect by having it continue as long as the mouse remains over the a e ...

javascriptjqueryhtmlcssjquery-animate

What is the best way to add CSS styling to the child elements within a component?

<ButtonAtom></ButtonAtom> this is my custom button component. <template> <div> <button class="px-2 py-1" :class="[borderRadius, backgroundColor]"> <slot /> </button> <div> </ ...

javascripthtmlcsstypescriptvue.js

Having trouble with images not showing up properly when applying rounded CSS borders and opacity effects

Trying to solve a unique problem, I am seeking advice: On my website, I have included a 300 x 300 Pixel square png-image of a circle. Utilizing Zurb's Foundation 5.0.2 as a CSS Grid basis. My objective is to create a CSS-border around the circle and ...

htmlcss

What is the best method for transforming this table design into a div structure?

After being told by a friend to try using the div layout, I've been struggling to make it work for my needs. My goal is to achieve the layout shown in the diagram below: +-----------------------------------------+ | Fixed Height = 50 ...

htmlcss

SASS fails to recognize the variable

I am trying to incorporate borders based on specific @media breakpoints. Here is the code I have written: @media(max-width:767px) { $height: auto; $grid: 1; } @media(min-width: 768px) and (max-width:991px) { $height: 370px; $grid: 2; } @media(min-width: 9 ...

csssass

A guide on applying color from an API response to the border-color property in an Angular application

When I fetch categoryColor from the API Response, I set border-left: 3px solid {{element.categoryColor}} in inline style. Everything is functioning correctly with no development issues; however, in Visual Studio, the file name appears red as shown in the i ...

htmlcssangulartypescript

How come the content division isn't inside the wrapper division?

I'm having an issue where my 'content' div is not staying within the 'sitewrapper' div. The HTML code: <div class="sitewraper"> <div class="categorietree"> <?php echo $categorietree; ?> </div> ...

htmlcss

Arrange grid column elements (similar to aligning with justify: flex-start)

<item> <h2 class='title'> TITLE </h2> <video-item> <img src="https://placehold.it/1600x1100"> </video-item> <overview> <p>CONTENT</p> < ...

csscss-grid

Disappear text gradually while scrolling horizontally

There is a need to create a special block that displays fading text on horizontal scroll. However, the problem is that the block is situated on a non-uniform background, making the usual solution of adding a linear gradient on the sides unsuitable. Click ...

javascripthtmlcssfade

Having trouble with the functionality of Bootstrap 5 carousel?

I've been attempting to integrate this carousel into my Bootstrap 5 webpage. I found it on Codepen - https://codepen.io/sahil-verma/pen/wxXryx Thus far, I've copied the code into my webpage and linked the corresponding CSS within style tags, sim ...

htmlcsstwitter-bootstrapbootstrap-5

Is it possible to eliminate a character from text that lacks html tags or CSS classes using CSS?

I need assistance in removing characters that are not associated with any HTML tag, CSS id or class. Specifically, I want to eliminate the "--" from the provided code snippet below. Can someone please guide me on how to achieve this? <span cl ...

htmlcss

Hide object scroll percentage with CSS styling

Is there a way to dynamically hide an element based on the user's scrolling behavior? I have incorporated floating social buttons into my website, and I am looking for a solution that will hide them when the user reaches the bottom of the page (foote ...

cssscrollhidepercentage

How to apply unique styles to multiple elements with the same class using jQuery?

How can I add different classes to multiple div elements with the same class based on their content? <div class = "flag"> Yes </div> <div class = "flag"> No </div> <div class = "flag"> Yes </div> <div class = "flag"& ...

javascripthtmljquerycss

Fixed Sidebar Position Changes when Bootstrap Modal Closes

We are facing a peculiar issue in our React application involving a sidebar and a bootstrap modal. The problem arises when we click the "X" button in the modal, causing the sidebar to momentarily drop down the page before the modal closes. This strange be ...

cssreactjssassreact-bootstrap

Despite implementing the necessary middleware, the CSS file still refuses to load

My CSS files are not loading properly. When I inspect the element (F12) and go to Networks, my CSS file is not visible. I have added the middleware: app.use(express.static(path.join(__dirname, '/public'))); and required the path above it. I ha ...

cssnode.jsexpressejsmiddleware

What could be the reason behind the malfunctioning of my media query in the

I am trying to connect an external stylesheet to my React component in order to apply different styles based on screen width. Specifically, when the screen width is less than 300px, I want the logo to have a height of 100vh. However, it seems that the medi ...

htmlcssreactjs

Styling the dropdown list with CSS padding on all sides

There seems to be an issue with adding padding all around a p-dropdown within a p-table Here is the code snippet: <td> <p-dropdown name="country" [options]="countries" [(ngModel)]="applicant.country" placeholder= ...

htmlcssangularsassprimeng

Striping includes each number

My HTML contains an ordered list with row striping, but it seems like the row striping is starting from behind the number. Is there a way to make the row striping start at the number itself? I've attached a snippet showing what's happening. h ...

htmlcss