Create an eye-catching hexagon shape in CSS/SCSS with rounded corners, a transparent backdrop, and a

I've been working on recreating a design using HTML, CSS/SCSS in Angular. The design can be viewed here: NFT Landing Page Design

Here is a snippet of the code I have implemented so far (Typescript, SCSS, HTML):

[Code here]
[CSS styles here]
[HTML structure here]

My accomplishments include creating the hexagon shape, implementing rounded corners, and positioning the content.

Currently, my goal is to add an inset shadow to the transparent hexagon which I am struggling with. Can anyone provide assistance?

View the image of the hexagon's design here: Hexagon Image

htmlcssangulartypescriptsass

Answer №1

My memory is jogged from the time I had to construct hexagons using CSS and came across suggestions of utilizing three triangles, just like what you're currently doing. Have you considered exploring the option of using clip-path to form the hexagon shapes? A quick Google search should lead you to plenty of gists or other helpful resources on this topic.

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

Using PHP to narrow down SQL results by date

When it comes to populating an HTML table with data from an SQL table using PHP, I have a specific method in place. Here's how I go about it: <table class="posts"> <?php $respost = mysqli_query($link,"SELECT * FROM table WHE ...

phphtmlmysqldatetime

Tips for refining TypeScript discriminated unions by using discriminators that are only partially known?

Currently in the process of developing a React hook to abstract state for different features sharing common function arguments, while also having specific feature-related arguments that should be required or disallowed based on the enabled features. The ho ...

typescripttype-inferencediscriminated-unionnarrowing

Swap Text Inside String - JS

I have a challenge where I need to extract an ID from an HTML element and then replace part of the extracted word. For instance: HTML <input type="checkbox" id="facebookCheckbox"></div> JavaScript var x = document.getElementById("facebookCh ...

javascripthtmlcssreplace

Is the misalignment due to a floating point error?

Attempted to create a 3-column layout without responsiveness, but encountered an odd alignment issue. http://jsfiddle.net/z5mgqk6s/ #DIV_1 { box-sizing: border-box; color: rgb(255, 255, 255); height: 83.2px; text-align: center; widt ...

htmlcss

Idea: Develop a bookmarklet that generates a header form and deletes it upon submission

After much contemplation and experimentation, I have been grappling with the idea of creating a bookmarklet that displays a header when clicked on any webpage. This header will contain a small form that submits its contents to a server before disappearing. ...

javascriptjqueryhtmliframebookmarklet

The art of toggling div visibility with jQuery

When a button is clicked, I want to display a div named 'info'. <button>Toggle</button> <div id="toggle"> Test </div> I'm looking to implement a jQuery sliding feature to reveal the div, but I'm unsure of where ...

jquerycsshtml

Correctly align the div on the screen as the viewport is scrolled

I am currently working on a parallax website where the sliders are designed to slide from the left and align within the viewport as the user scrolls. However, I have encountered an issue where multiple scroll actions are required for the slide to align pro ...

javascriptjqueryhtmlcssparallax

What is the best way to transfer a @ContentChild attribute to a fairy tale?

Is there a way to transfer an attribute from a component with a @ContentChild decorator to a story? Below is the code for the container component: @Component({ selector: 'app-header', templateUrl: './header.component.html', style ...

angularstorybook

Tips for enforcing a mandatory type with TypeScript

Creating a custom type called InputType with optional properties like this: export type InputType = { configJsonUrl?: string; configJsObject?: DataType; rawData?: { [key: string]: string }; action?: () => void; }; export type DataType = { id ...

typescript

"Error: Variable becomes undefined due to the implementation of async-await in TypeScript

There has been a persistent issue I've been dealing with for some time now. The problem lies in the fact that vm_res is undefined within the async update_vm_raw_device function despite the function running smoothly. As a result, the value being update ...

angulartypescriptasync-await

How to style the videojs chapter menu with CSS to extend the box to the full length of the line

I am currently working on customizing the videojs CSS for the ChapterButton menu in order to make it expand to accommodate varying line lengths without wrapping. Even though I can set it to a fixed width, I require it to be able to adjust to different line ...

cssvideo.js

Design a dynamic div element for banners that adjusts to different screen

Is there a way to create a responsive div similar to the img-responsive class in Bootstrap, but for a div element that changes its height relative to its width when the window size is adjusted? For example, if you look at the slider on this website "", yo ...

jqueryhtmlcsstwitter-bootstrapresponsive

What could be causing the undefined properties of my input variables in Angular?

Currently, I am fetching data from a service within the app component and passing it down to a child component using @Input. Oddly enough, when I log the data in ngOnInit, it appears correctly in the child component. However, when I try to assign it to a v ...

javascriptangulartypescriptinputservice

Creating sibling classes with tailwind using the map function

Currently, I am combining tailwind, react, and nextjs to develop a website. My goal is to implement the check radio button technique to dynamically display different content on the website without relying on JavaScript. To streamline data management, I am ...

cssreactjsnext.jscss-selectorstailwind-css

Using Long Polling with Angular 4

I am looking for a way to monitor the progress of a certain task using API calls. To achieve this, I have developed a service that executes these API calls every 1.5 seconds Main Component private getProgress() { this.progressService.getExportPr ...

angulartypescriptlong-polling

Prevent your HTML tables from overflowing

I am attempting to create an HTML table with three columns, where I want the first and third columns to have a width of "auto" based on their content. The middle column should then take up the remaining space. While this setup works well when the content ...

htmlcsshtml-table

The search results on my website are completely unaffected by jQuery

One website I have allows me to search within the database, focusing on boats at the moment. I have set up this form: <form method="post" action=""> <input type="text" class="form-control" id="searchField" name="searchField" autocomplete="of ...

phpjqueryhtmlsearch

Utilize nodemailer in Angular 6 to effortlessly send emails

I am currently experiencing an issue with my email service form in my Angular 6 application integrated with Node.js. I have set up the form using Bootstrap and Nodemailer for sending emails, but it seems to not be working as expected. Whenever I attempt to ...

javascriptnode.jsangularexpressnodemailer

Modifying table background color using AJAX and jQuery?

Scenario: My web page is designed to automatically search for a specific cell input by the user. If the cell has been input with a value, the table's background color will turn red; otherwise, it will remain green. Currently, the table has not been p ...

phpjavascriptjqueryhtmlajax

Issues with updating in Firebase real-time database using Angular 2 are not

I am currently working on a simple app that inserts new records into Firebase. Below the input field, the app lists the last 10 items in the database. ISSUE: I am facing a problem where I have to start inputting something in the input field or click on ...

firebaseangular