Looking to create angular corners for the menubar
The inner content could consist of labels or links.
Looking to create angular corners for the menubar
The inner content could consist of labels or links.
Have you considered utilizing the CSS3 property transform skew? It can create some interesting effects.
Check out this demo to see it in action.
.shape {
width: 200px;
height: 50px;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
transform: skew(30deg);
background: #000;
margin: 20px;
}
This code snippet demonstrates how to skew a simple div element by 30 degrees to achieve a desired shape.
Please note that since this is a CSS3 property, older browsers and IE may not fully support it. Consider using CSS3 Pie for compatibility.
Another approach to creating similar shapes involves using the :after and :before pseudo-elements along with CSS Triangles and the content property.
Take a look at demo 2, demo 3, and demo 4 for different variations.
In this method, we use a basic div element and position two CSS triangles absolutely within the container. This technique provides better compatibility across different browsers compared to the previous one. Customize the styles individually for flexibility, but remember to set display: block; for both :before and :after elements.
.shape {
width: 200px;
height: 50px;
background: #000;
margin: 50px;
position: relative;
}
.shape:before {
display: block;
content: "";
height: 0;
width: 0;
border: 25px solid #f00;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
position: absolute;
left: -50px;
}
.shape:after {
display: block;
content: "";
height: 0;
width: 0;
border: 25px solid #f00;
border-top: 25px solid transparent;
border-right: 25px solid transparent;
position: absolute;
right: -50px;
}
Web Design Example
<div class="shape">
<div class="text">
insert text here
</div>
</div>
CSS Styling
.shape {
width: 200px;
height: 30px;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
transform: skew(30deg);
background: #000;
margin: 20px;
color:#fff;
}
.text{
width: 150px;
height: 30px;
margin:0px auto;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
transform: skew(-30deg);
color:#fff;
}
One thing that really bothers me about using triangular borders is the limitation of having multiple triangles with different colors. Even with javascript, accessing the pseudo-elements :before and :after proves to be a challenge, leaving me to resort to using 3 divs, aligning them correctly, and giving them all the same color. It's just too much work.
The optimal solution would involve utilizing transform: skew() for modern browsers.
However, it's important to note that this transformation will affect every element within that div. This means that text inside your menu bar will also appear skewed. To counteract this, you can apply a reverse-skew to the inner div like so:
.menu-container {
...
transform: skewX(30deg);
...
}
.menu-inner {
...
transform: skewX(-30deg);
...
}
Enjoy experimenting with this! :)
In the given HTML code snippet, I have the following line: $('#myform #progress').html('<img src="images/ajax-complete.gif" /> Successful.') I simply want to change the text color of Successful to green when it is shown. How can ...
My Images are refusing to align in a horizontal row no matter what I try. Output: https://i.sstatic.net/echGV.png .img-size-square { width: 100%; height: auto; max-width: 400px !important; max-height: 400px !important; } .container-f ...
Is it possible to achieve this specific layout using only Bootstrap 4? +-------------------------------------------------+ | Navbar fixed on top | +------------+------------------------------------+ | | ...
If you want to see a live demonstration, simply copy the code into Notepad++ and run it in Chrome as an .html file. I encountered some difficulties when trying to display a working example using Snippet or CodePen, so unfortunately, I couldn't provide ...
Issue I am facing a challenge in responsively aligning the previous and next navigation buttons using Owl Carousel v2. I need these buttons to fit within the offset column of the centered container and maintain their overlay position down to 767px, instea ...
I am encountering an issue with the submit button icon not displaying. In my .php file, I have the following code: $submit = new Zend_Form_Element_Submit('submit'); $submit ->setLabel(Zend_Registry::get('Zend_Translate')->tra ...
I've been struggling to make use of the ::before pseudo-element in CSS for a hover effect. Despite going through various tutorials on YouTube, I can't seem to get it to work properly. I'm not sure why this isn't working as expected. ...
Looking for a solution to incorporate banner code dynamically into an existing block of HTML on a static page without altering the original code? <div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div> <div class="wrapp ...
I am trying to use the unique font called lobster. After downloading the lobster.woff2 file, I stored it in the font folder. In my custom CSS, I added the following: @font-face { font-family: 'Lobster'; font-style: normal; font-weight: 40 ...
Incorporating a GridList displaying a variety of images fetched from an external source, I have successfully created an ever-changing image gallery. Now, my goal is to convert this dynamic image gallery into grayscale or transparency and utilize it as a ba ...
I have a pet project that requires mobile responsiveness, and I'm encountering an issue with white space in the Carousel component. I am unsure of how to remove it - can anyone provide assistance? Here is how the page looks on PC: https://i.sstatic.n ...
My HTML code for a small web app has a button that says "ok," but it's too tiny to display the text fully. I wonder if I'm missing something with the span element? How can I enlarge the button so that it's bigger and shows the entire "ok" ...
What I am trying to achieve is that when I click on the inputbox or selectbox, the box shadow defined in my CSS should also cover the input-group-add-on feature in Bootstrap 3. The issue I'm facing is that the input-group-add-on does not display the ...
Currently grappling with understanding the intricacies of styling in web development (specifically VueJS). I am facing some challenges: I am dynamically rendering colored dropdowns filled with dropdown items. I am struggling to figure out how to change t ...
Is there a way to conceal the blackberry cursor while browsing on the browser? Perhaps through Javascript or CSS? I am attempting to replicate the functionality found in native apps where users can flick through items with their finger. I find this featur ...
Readability is a nifty JavaScript tool that magically transforms a cluttered HTML page into a more user-friendly format. I'm on the hunt for a Ruby implementation or something along those lines - does anyone know of a library that offers similar funct ...
I attempted to create a design similar to the Instagram "ask me a question" box, but I am encountering an issue where there is some extra border around the title when the two divs merge. What am I doing incorrectly? .info { overflow: hidden; ...
My goal is to create a modal with 4 sections, each loading its content dynamically using the .load() function to the container on the right side. The challenge I'm facing is that I have a footer menu that triggers the modal to open, and I need it to ...
Two functions need to be called based on the screen width. Here is one attempt: var winWidth = $(window).width(); var sections = function() { $('.image').each(function(){ var $this = $(this), x = $this.find('img'). ...
We are currently struggling with keeping a 2000px wide by 580px height image centered when the browser is resized. It starts off centered, but as we adjust the size of the window, the image loses its centering. I have seen websites where a large image rema ...