css pentagon malfunctioning

Recently, I was assisting a friend in creating a pentagon using CSS - it turned out to be more challenging than I expected.

If you take a look at this link, you'll see what I mean. It consists of 5 triangles created with CSS and then rotated and aligned correctly.

However, I wanted to add some animation when hovering the mouse over the pentagon. The issue is that when the triangles are drawn, their div remains rectangular and overlaps with other divs. Is there a way to fix this without moving the triangles further apart?

The alignments are not working as intended in this jsfiddle. Here's the code in the jsfiddle:

HTML

<body>
<div id="pentagontopleft" class="pentagon"></div>
<div id="pentagontopright" class="pentagon"></div><br>
<div id="pentagonbotleft" class="pentagon"></div>
<div id="pentagonbotright" class="pentagon"></div><br>
<div id="pentagonbotmid" class="pentagon"></div>
</body>

CSS

#pentagontopleft {
  margin:70px 0 5px 150px;
  position: relative;
  border-width: 0 164px 222px 164px;
  border-style: solid;
  border-color: #37272e transparent;
  display: inline-block;
  transform:rotate(144deg);
    -ms-transform:rotate(144deg); /* IE 9 */
    -webkit-transform:rotate(144deg); /* Safari and Chrome */
}

#pentagontopright {
  margin:70px 0 5px -180px;
  position: relative;
  border-width: 0 164px 222px 164px;
  border-style: solid;
  border-color: #37272e transparent;
  display: inline-block;
  transform:rotate(216deg);
    -ms-transform:rotate(216deg); /* IE 9 */
    -webkit-transform:rotate(216deg); /* Safari and Chrome */
}

#pentagonbotright {
  margin:-85px 0 5px -80px;
  position: relative;
  border-width: 0 164px 222px 164px;
  border-style: solid;
  border-color: #37272e transparent;
  display: inline-block;
  transform:rotate(288deg);
    -ms-transform:rotate(288deg); /* IE 9 */
    -webkit-transform:rotate(288deg); /* Safari and Chrome */
}

#pentagonbotleft {
  margin:-85px 0 5px 100px;
  position: relative;
  border-width: 0 164px 222px 164px;
  border-style: solid;
  border-color: #37272e transparent;
  display: inline-block;
  transform:rotate(72deg);
    -ms-transform:rotate(72deg); /* IE 9 */
    -webkit-transform:rotate(72deg); /* Safari and Chrome */

}

#pentagonbotmid {
  margin:-150px 0 5px 225px;
  width: 0;
  border-width: 0 164px 222px 164px;
  border-style: solid;
  border-color: #37272e transparent;
  display: inline-block;
}

canvas {
  margin-left: -50px;
}

JS

$(document).ready(function() {
  $('.pentagon').mouseenter(function() {
    $(this).css('border-color','red transparent');
  });
  $('.pentagon').mouseleave(function() {
    $(this).css('border-color','#37272e transparent')
  })
});

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

Obtaining cookies from a separate domain using PHP and JavaScript

Imagine you have a cookie set on first.com, called "user". Now, the goal is to retrieve that cookie on second.com using JavaScript and AJAX. Unfortunately, it's not working as expected and you're receiving xmlHttp.status=0. Here is a sample code ...

Eliminate duplicate items using the reduce method in JavaScript

Working with a set of Json Objects, I use a javascript map function to list each field along with an array of its possible types. For example: birthDate, [Date, String, String, String, String] isMarried, [Boolean, Boolean, Boolean, Boolean, String] name, ...

Transforming mesh velocity into mesh rotation with Three.js

If I have a three.js mesh along with a velocity vector3. Elsewhere, the velocity is modified and then added to the mesh.position every frame. My goal is to have the mesh.rotation aligned with the velocity, making the mesh act like an arrow always pointin ...

Clients using Socket.io are known to establish connections with various sockets housed within the same server

Hello, I am currently managing a standard chatroom using socket.io but have encountered an issue that I am struggling to troubleshoot. The chatroom appears to be operating normally as clients can send and receive messages. However, there is an occasional ...

Accessing data outside of the scope when looping through items in Angular forEach

I am currently working on retrieving the Game ID generated by the APIService.postData method for the game. The goal is to utilize this Game ID within the Angular foreach loops to maintain foreign key constraints on the RESTful side. Any advice on extracti ...

Utilizing Observable Data in Angular 4 TypeScript Components

Looking to extract and assign a JSON value obtained from an API into a variable. Here is an example: TS this.graphicService.getDatas().subscribe(datas => { this.datas = datas; console.log(datas); }); test = this.datas[0].subdimensions[0].entr ...

Angular Universal Resolve

I am trying to ensure that an asynchronous call completes before any of my routes are resolved by modifying route.resolve as follows: var originalWhen = $routeProvider.when; $routeProvider.when = function(path, route) { route.resolve || (route.resolve ...

What is the method for placing a badge above a Font Awesome icon?

Is it possible to add a badge with numbers like 5, 10, or 100 on top of the Font Awesome symbol (fa-envelope)? I am looking for something like this: However, I am struggling to figure out how to place the badge on top of the symbol. You can see my attempt ...

Having trouble retrieving state parameters when trying to launch a modal in AngularJS

When the "view detail" link is clicked, I wanted to open a modal for a detailed view of a specific user. However, I encountered an issue where I couldn't retrieve the user ID in the resolve attribute of $uibModal.open(). Strangely enough, the ID is av ...

Embed the div within images of varying widths

I need help positioning a div in the bottom right corner of all images, regardless of their width. The issue I am facing is that when an image takes up 100% width, the div ends up in the center. How can I ensure the div stays in the lower right corner eve ...

Updating the Bootstrap entry dynamically within the @NgModule module

My web application has a specific requirement where it can only be accessed through example.com/index.html without any parameters. The backstory behind this restriction is quite lengthy, so let's not delve into that. Within the index.html file, I have ...

Exploring the features of NodeJS, diving into the world of mapping,

Currently, I am working in a Node.js environment and dealing with an array of IDs. My goal is to filter these IDs based on the response of another API call. Essentially, I need to check if each ID meets certain criteria specified by this external API. Whi ...

Managing cookies in PHP and JavaScript can present challenges due to variations in how different browsers

Our website utilizes ExpressionEngine as the CMS and Magento's cart for e-commerce. I am encountering challenges with cookies and their accessibility in various sections. A cookie is used for storing search selections, allowing users to return to our ...

"Adjusting the margin for dropdowns in a Bootstrap navbar

Is there a way to customize the alignment of the bootstrap navbar drop-down? Currently, the drop down menu always starts from the right corner. I would like to set a specific starting point for the drop-down. You can view an example in this Fiddle. When ...

JavaScript can switch the rendering mode from quirks mode to standard mode in Internet Explorer

Is it possible to switch IE from quirks mode to standard mode using JavaScript? I am unable to edit the HTML content header, and adding a new IE=edge meta tag to the head element is not effective (it displays a message stating that the mode has been set ...

Modify the color of cells containing prime numbers within a dynamic table generated using JavaScript

I have successfully created a code to generate a table with a user-defined number of cells. I also want the cells containing prime numbers to be colored differently. I've written a function to find prime numbers, but I'm having trouble integratin ...

Guide to Obtaining Weight Data from a USB Scale

Looking for advice on how to import the reading from my USB weighing scale into an HTML form. I'm exploring options like Ajax/Js or Server side VBScript (classic asp) to accomplish this task. If anyone has recommendations on where I should start my s ...

Encountering errors with abstract keyword in TypeORM while implementing concrete table inheritance is a common issue

Looking for some guidance on class inheritance in TypeORM. Currently, I am trying to implement concrete table inheritance as outlined here: https://github.com/typeorm/typeorm/blob/master/docs/entity-inheritance.md#concrete-table-inheritance. However, I am ...

Is it possible to create an index.html page with all the necessary head tags to prevent duplicate code across multiple html pages?

Imagine I am using app.js or a Bootstrap CDN link for all of my HTML pages, but I don't want to include it in every single page individually. Is there a way to create an index.html file that includes this so that all other HTML pages load the head fro ...

Utilizing jQuery for extracting information from JSON datasets

I've been grappling with getting jQuery to interpret JSON data, but it keeps coming back as undefined. $.post( wce_data.url, { userid : userId, token : accessToken }, 'json') .done(function( data ) { consol ...