What is the best way to create two divs separated by a forward slash?

I'm trying to create a menu that looks like the image, but I'm having trouble figuring out how to divide the two divs and make them clickable.

I've experimented with using SVG and borders on the divs, but I can't seem to get them to work together because of the rectangular "outline."

You can see an example of the image at this link: 

My current output:

********|   *****
******* |  ******
******  | *******
*****   |********

Desired output:

******** *****
******* ******
****** *******
***** ********

I also want to make these divs clickable.

This is my attempt based on Hugo Marabutt Nogueira's answer.

You can view my code here: http://jsfiddle.net/L7PL4/

javascripthtmlcss

Answer №1

There is a simple and clean way to achieve this effect using borders and CSS transforms to create angled elements.

Check out the JSFiddle demo here

How it's done in CSS:

* {
    padding: 0;
    margin: 0;
}
.container {
    width: 100%;   
    height: 50px;
}
.left,
.right {
    float: left;
}

.left span,
.right span {
    position: absolute;
    line-height: 50px; 
}

.left {
    width: 25%; 
    border-bottom: 50px solid blue;
    border-right: 50px solid transparent;
    -webkit-transform: rotateX(180deg);
}

.left span {
    width: 100%;
    text-align: center;
    -webkit-transform: rotateX(-180deg); 
}

.right {
    width: 25%;
    border-bottom: 50px solid green;
    border-right: 50px solid transparent;
    -webkit-transform: rotate(180deg) rotateX(180deg);
}

.right span {
    width: 100%;
    text-align: center;
    -webkit-transform: rotate(-180deg) rotateX(-180deg);
}

Don't forget to appropriately transform and unskew the text within the elements, and remember to include vendor prefixes for cross-browser compatibility with transforms.

Answer №2

To create that shape, you can utilize CSS3 Transitions and then attach a JavaScript click function to them.

Here is an example:

.skew{
  background-color: #333;
  width:150px;
  height:75px;
  float:left;
  position:relative;
  margin-left:100px;
  margin-top:50px;
  cursor:pointer;
}
.a:before{
    content:"";
    position:absolute;
    background: #333;
    top:0;
    left:-25px;
    bottom: 0;
    width: 50px;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -ms-transform: skew(-20deg);
    transform: skew(-20deg);
}
.b:after{
    content:"";
    position:absolute;
    background: #333;
    top:0;
    right:-25px;
    bottom: 0;
    width: 50px;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -ms-transform: skew(-20deg);
    transform: skew(-20deg);
}

Answer №3

To create an overlapping effect with the element, you can utilize a negative margin. For instance:

margin-right: -5px;

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

The POST response I received was garbled and corrupted

Operating under the name DownloadZipFile, my service compiles data and constructs a Zip file for easy downloading. This particular service provides a response that contains the stream leading to the file. A Glimpse of the Service: [HttpPost] public Actio ...

javascriptc#ajaxpostblob

Experience the convenience of uploading photos using jQuery Dialog on your ASP.NET MVC website

I am in the process of developing an ASP.NET MVC 3 application and encountering an issue with using a jQuery Dialog to upload a photo. Despite my code implementation, the HttpPostedFileBase object within my model (representing the file to be uploaded) cons ...

javascriptjquery.netasp.net-mvcupload

Centering headings and form elements in Bootstrap

I have a bootstrap row with a heading and an input field. Here is my code: <div class="row mb-5"> <div class="col h1 text-white text-start text-center text-md-start text-lg-start">Welcome<input class="for ...

htmlcssbootstrap-5

Click to execute instantly without encountering any errors

I'm working with a modal in React JS and I want to trigger a function when the modal opens. I currently have a button function that is functioning correctly using the following code: <button onClick={functionExample("stringParam", true)} ...

javascriptreactjs

The specific page redirect to its corresponding mobile page is not functioning properly

Having some issues with the code below that is causing problems when trying to redirect users to specific mobile pages based on the desktop page. Any assistance would be greatly appreciated. function mon() { if ($('body').is('.mon') ...

javascriptjquery

Is there a way to insert a record upon the user clicking on the Add Record button?

// Here is my Component code // I want to figure out how to add a new row to the table with fresh values. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-uom', templateUrl: './uom.component.html ...

angularhtmlcss

When the internet reconnects, the browser will automatically retry making requests that previously failed

My current setup involves using GWT (Java to JavaScript) as the front-end, with an RPC mechanism (AJAX) to make server requests (Servlets are utilized for this purpose). Everything has been running smoothly so far. Recently, a test case was created which ...

javajavascriptajaxgwtweb

Having trouble getting a resizable DIV inside a 100% height DIV with margin to work properly. Any tips or assistance would be greatly

I've encountered a common issue that is slightly different from others I've come across. Despite my best efforts, I have been unable to find a solution on my own. If anyone could offer me some guidance on this, I would greatly appreciate it. The ...

csshtmlheight

What is the process for uploading files with just node.js?

My dilemma involves a webpage featuring a form with a file input field. Upon submitting the form, I wish for the server to write the file on the server side. Despite numerous attempts to upload various test images using this form, each results in a plain ...

javascriptnode.js

Having trouble displaying the selected button in React

Is it possible to include multiple functions within an onclick event? Check out the code snippet below: import React from 'react'; class Counter extends React.Component { state = { count: 0, inc: 'Increment', ...

javascriptreactjsjsx

What is the best way to halt all active Ajax requests initiated by a DataTables instance?

Description of Issue Every time I reset the test server to a known state, my tests fail due to ongoing Ajax requests initiated by DataTables instances. I am seeking a solution to prevent these failures by stopping the DataTables requests before resetting ...

javascriptjqueryajaxdatatablessystem-testing

Unable to transform undefined or null into an object within Next.js

Hi there! Currently, I am working on creating a login page using Next.js and next-auth. I have included the necessary providers in the providers array within [...nextauth].js. However, when I attempt to run the following code: import { getProviders, signIn ...

javascriptreactjsnext.jsnext-auth

Client.on facing issue with receiving data upon initial connection

Currently, I am utilizing the net module in order to establish a connection between my client and server. Below is the code snippet: const Net = require('net'); client = Net.connect(parseInt(port), host, function() { co ...

javascriptnode.jstcpsocket.io

Adjust background image size to fit the dimensions of the foreground content

I have a div where an image and content are inside. I am trying to make the background image adjust its size based on the content within it, rather than showing the full image size with empty space. My current styling uses flexbox: .section { height: ...

htmlcss

Could someone explain how CSRF protection works with empty Flask-WTForms forms?

I have a query regarding csrf Cross-site Request Forgery Attacks in flask. After finding a helpful youtube video, here is what I learned: There was an incident where an email was changed by someone who was logged in through a specific path that allows up ...

htmlflaskflask-wtforms

Showing information on a grid using ejs and express

My goal is to display news articles using the NewsAPI in a grid format, with each grid item randomized in appearance. However, I'm encountering an issue where I only receive one instance of data from express for each loop iteration, resulting in grids ...

javascriptnode.jsexpressejs

The Impact of CSS Border Width on the Size of a PHP Form

Creating a PHP form with a tabbed box has been quite the challenge. With 3 tabs, each requiring different field inputs, I set out to add a border around the form headings and tabs. The border looks great, but it poses a problem - its width spans the entire ...

phphtmlcss

Transitioning the height of a webpage element from a fixed value to fit the content dynamically

I'm trying to create a div that smoothly transitions from a set height to a height based on its text content. This likely involves considering the window width, as narrower windows cause text wrapping and increase the required height. #object { w ...

csshtmlwebkitcss-transitions

Who is the father of Bootstrap Popover?

I'm currently facing an issue with getting a popover to be placed within a specific element. As of now, the popover is being inserted directly into the <body>, but I require it to be relative to other elements. I have been unable to locate a met ...

javascripttwitter-bootstrap

Creating an appealing navbar in React by skillfully integrating the image logo and brand name for a

Having some trouble positioning my logo on the top left corner of the navbar. It keeps ending up in an awkward spot alongside the brand name. https://i.stack.imgur.com/XZjV9.png If anyone has any tips on how to properly align the logo and brand on the na ...

htmlcssreactjsmaterialize