Create a sleek and sharp design for the menu and buttons

How can I replicate this menu design using CSS?

https://i.sstatic.net/bpB9S.png

I believe it is achievable with CSS, but I am unsure of where to begin. Can someone provide guidance on how to recreate this menu style? I do not have any existing code to share as I am starting from scratch.

htmlcssmenucss-shapes

Answer №1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" /> 
    <title>[shape]</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=0.5, user-scalable=yes" />
    <style>
        html {
            font-size: 62.5%;
            text-align:center;
        }
        body {
            text-align:center;
            margin:auto;
            padding-top:20px;
        } 
        *{
             -moz-box-sizing: border-box;
              -ms-box-sizing: border-box;
             box-sizing:border-box;
             margin:0;
             padding:0;
            font-size: 2rem;
            line-height:2.5rem;
        }
.row {
  overflow: hidden;
}

.shape {
  position: relative;
  width: 150px;
  height: 70px;
  line-height: 70px;
  margin: 0 auto;
  background: #cccccc;
  color:#ffffff;
}
.shape:before, .shape:after {
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
  width: 50px;
  height:100px;
  background: #cccccc;
  content: '';
}
.shape:before {
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transform-origin: left bottom;
  -moz-transform-origin: left bottom;
  -ms-transform-origin: left bottom;
  -o-transform-origin: left bottom;
  transform-origin: left bottom;
}
.shape:after {
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -ms-transform-origin: right top;
  -o-transform-origin: right top;
  transform-origin: right top;
}
    </style>
</head>
<body>
    <div class="row"><div class="shape">MENU</div></div>
</body>
</html>

Answer №2

Is it possible that gradients could achieve this effect? It may also vary.

nav {
  background:#333;
  padding-right:2.85em; /* same value as negative margin on a , optionnal depending on result wished */
  
  }
a {
  color:white;
  padding:0.5em 3em;
  display:inline-block; margin:0 -2.85em 0 0; /* tune to whatever if you want bg to touch or not */
  
  background:linear-gradient(135deg, transparent 1.75em,  gray 70%) no-repeat left,linear-gradient(-45deg, transparent 1.75em,  gray 70%) no-repeat right;
  background-size:50% auto;
  }
.active {
  background:linear-gradient(135deg, transparent 1.75em, #0278F4 1.5em) no-repeat left,linear-gradient(-45deg, transparent 1.75em, #0278F4 1.5em) no-repeat right;
  background-size:60% auto;
 
  }
/* different color on hover ? */
 a:hover {
  background:linear-gradient(135deg, transparent 1.75em, tomato 1.5em) no-repeat left,linear-gradient(-45deg, transparent 1.75em, tomato 1.5em) no-repeat right;
  background-size:60% auto;
 
  }
<nav>
  <a href="#">Home</a>
  <a href="#" class="active">About</a>
  <a href="#">Clients</a>
  <a href="#">Contact Us</a>
</nav>

Visit CodePen for experimentation

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 there a potential problem with unescaped characters in an HTML field within a JSON response?

Imagine an API returns a JSON response as shown below: {"error":"","data":"example_html_code_here"} Instead of showing "example_html_code_here", the actual HTML code or page is returned. Should this HTML code be es ...

javahtmljson

What is the best way to display a JavaScript object array on the screen

As someone who is new to JavaScript, I have a JavaScript object array that I would like to print the values of in the browser. However, I am unsure of how to do this without using document.write(vehicle); var vehicle = [{name:'Van',wheel:4,cha ...

javascripthtmlarraysobjectprinting

What is the best way to dynamically pass props to the styles hook in Material UI?

Looking for a way to dynamically add background images to div elements? I'm currently iterating over an array of objects and returning divs, but I'm not sure how to set the background image based on the image URL in each object. Can anyone help m ...

javascriptcssreactjsmaterial-uifrontend

Generate several JSON objects and transmit them to a Spring controller using AJAX

<script> $(document).ready(function() { $("#frm_details").on("submit", function(event) { event.preventDefault(); var data = $(this).serialize() $.ajax({ url : "/saveUser", type : "post", ...

htmlajaxspring-mvcspring-bootspring-config

How can the background of a div be altered when text is typed into an input field?

I need help with the following code. I want to be able to change the background color of a div with the class "target_bg" from red (default) to green every time someone enters or types text into the input field. <div class="target_bg"></div> & ...

javascripthtmlcss

Expand an image to its full dimensions when it is initially loaded

Currently, I am experimenting with placing images of bubbles randomly on a webpage. To create the illusion of the bubble expanding in size from nothing to its full scale, I have been using CSS and specifically the transform:scale(); property. However, my ...

javascriptjqueryhtml

Make the div expand across the entire width of the browser, regardless of the content contained within

Hey there, I'm facing an issue that needs fixing. I have a form that I need to place inside a box. So, I nested the form inside a div and added a background color to the div. The only problem is that the div is expanding to the entire width of the bro ...

htmlcsscontainers

What is the best way to center a div at the bottom of the screen?

Here is an example of CSS: #manipulate { position:absolute; width:300px; height:300px; background:#063; bottom:0px; right:25%; } And here is the corresponding HTML: <div id="manipulate" align="center"> </div> What is the best w ...

htmlcss

The HTML content retrieved through an ajax service call may appear distorted momentarily until the JavaScript and CSS styles are fully applied

When making a service call using ajax and loading an HTML content on my page, the content includes text, external script calls, and CSS. However, upon loading, the HTML appears distorted for a few seconds before the JS and CSS are applied. Is there a sol ...

javascriptjqueryhtmlcssajax

Clicking on the menu in mobile view will cause it to slide upward

I have implemented sticky.js on my website and it is working well. However, when I resize the browser to mobile view and click the main menu button, it goes up and I am unable to close it. I have to scroll up to see it again. How can I make it stick to the ...

javascriptjquerycssresponsive-design

My jQuery plugin crashes when I delete the line with '.css({display: 'none'})'

Currently, I am utilizing a jquery plugin that replaces the file input of a form with a div. This allows for the file browser to pop up when the div is clicked. Upon selecting a file, the form is automatically submitted and the results are loaded into a hi ...

javascriptjquerycss

Dynamic Data Display

I'm experiencing an issue where the data is not displaying in the table div when using an Ajax call to load the table. The page appears blank upon return, and I have tried using $('#groupTable').load(data); without any success. If anyone can ...

jqueryajaxasp.net-mvchtmlasp.net-mvc-4

Utilizing JQUERY to modify the 'top' attribute upon clicking

I am attempting to implement a vertical scroller using jQuery, but I'm encountering difficulties with my code. function scrolldown() { var newtop = $('.scroll-content').css('top') + '250'; $('.scroll ...

jquerycss

Submitting HTML elements from a webpage using PHP

Is there a way to store an entire HTML table as a single record in my database? I would like the following table data to be submitted when I click the submit button: <table> <tr><td>Items</td></tr> </table> Can thi ...

htmlpost

Different width, same height - images arranged side by side in a responsive layout

The problem lies in the images: https://i.sstatic.net/rydNO.png Here is an example of desktop resolution: https://i.sstatic.net/uv6KT.png I need to use default size pictures (800x450px) on the server. This means I have to resize and crop them with CSS to ...

javascriptjqueryhtmlcssimage

Troubleshooting FileReader.onload Failure Following Form Submission (POST) in JavaScript

Currently, I am in the process of developing a single-page uploader using Javascript (+jQuery) and leveraging AppJS. This uploader consists of two forms with upload inputs. Both forms are on the same page, with the second form initially hidden using displ ...

javascriptjqueryhtmlnode.jsfilereader

Tips for confining a float within a div with fluctuating space

I have a scenario where I have multiple divs ('group') containing text, and there is a floated div ('toggle') in the bottom corner. The current code works well if the text length in 'group' is consistent, but the position of t ...

csshtmlcss-floatabsolute

What is the best way to align the checkbox and label in a React form?

I've been struggling to align the labels next to the checkboxes on this form. I'm currently utilizing React with React-Hook-Form for validation and state management (you can find the code on GitHub: https://github.com/cipdv/ciprmt-mern/blob/main/ ...

cssreactjsformsreact-hook-form

Guide on retrieving JavaScript variables in a JSON response and showcasing their values on a web page

I need to show the data from a JSON response: item.php $ItemList = array(itemcode=>EATERY, itemname=>'Popcorn') ; $ItemDisplay = " '<div>' + document.write(this.itemname) + ' - ' + ...

phphtmljsonajax

Is there a way to prevent users from dropping links or images into an input field

Is there a way to prevent users from dropping links or images into an input box? I'm open to using JavaScript or jQuery. Here is what I have attempted so far: http://jsfiddle.net/eRqzz/ $("input#fl_search, input#fl_search_bdy").on('drop', ...

javascriptphpjqueryhtml