CSS tip: Create a trendy design by adding a slanted border to the last

I need help creating a unique menu list with a white border design. The borders should all be straight by default, except for the last border which must be slanted.

ul {
  background-color: #183650;
}

li {
  list-style: none;
  display: inline-block;
  border-left: 1px solid #FFF;
  color: #FFF;
  text-transform: uppercase;
  padding: 5px 10px;
  font-size: 12px;
  text-align: center;
}
li:first-child {
  border: none;
}

This is what I have currently:

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

My goal is to achieve this look:

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

The border style should simply be border-left: 1px solid #FFF;.

https://jsfiddle.net/u41wo2vc/3/

javascripthtmlcsscss-transforms

Answer №1

To achieve the desired effect, simply apply the skew() function:

ul {
  background-color: #183650;
}

li {
  list-style: none;
  display: inline-block;
  border-left: 1px solid #FFF;
  color: #FFF;
  text-transform: uppercase;
  padding: 5px 10px;
  font-size: 12px;
  text-align: center;
}

li:first-child {
  border: none;
}

li:last-child {
  transform: skew(-15deg);
}

li:last-child span {
  display: inline-block; /* or "block" */
  transform: skew(15deg);
}
<div class="menu">
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li><span>Item</span></li>
  </ul>
</div>

An additional wrapper can be used to counteract the skew effect on the content.

Answer №2

Utilize a pseudo element on the final <li> and apply skewing

ul {
  background-color: #183650;
}

li {
  list-style: none;
  display: inline-block;
  border-left: 1px solid #FFF;
  color: #FFF;
  text-transform: uppercase;
  padding: 5px 10px;
  font-size: 12px;
  text-align: center;
}

li:first-child {
  border: none;
}

li:last-child {
  position: relative;
  border: none;
}

li:last-child::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: #fff;
  transform: skew(-20deg);
}
<div class="menu">
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

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

When using AngularJS, the templateUrl feature delays the initialization of the controller, causing issues with dependent code

Recently, I began experimenting with AngularJS and so far, everything seems to be going smoothly except for one small issue. Let's consider a scenario where I have two directives, with one directive relying on the other, like this: angular.module(&ap ...

javascriptangularjs

Can you provide guidance on implementing StyledComponents within the app folder of Next.js version 13?

Quoting information from the Next.js documentation: Attention: CSS-in-JS libraries that rely on runtime JavaScript are currently not compatible with Server Components. The following libraries are supported in Client Components within the app directory: s ...

javascriptreactjsnext.jsstyled-components

React Native: Issue with Higher Order Component when utilizing the `onLayout` prop

The functionality of this component involves rendering the Placeholder. Once it acquires its layout, this higher-order component (HOC) updates the state and invokes the child component with the values. Everything seems to be working fine up to this point. ...

javascriptreactjsreact-native

Showcasing images in Flask

Hello everyone, I am encountering an issue with displaying images in my HTML file. Currently, I am using Flask within Visual Studio Code and here is the code snippet that I want to display: <img src="/templates/WANG_CHONG_st_1.png" width=" ...

htmlflasktailwind-cssbootstrap-5

What are some strategies to reduce the frequency of API calls even when a webpage is reloaded?

Imagine I'm utilizing a complimentary API service that has a restriction of c calls per m minutes. My website consists of a simple HTML file with some JavaScript code like the one below: $(function () { //some code function getSomething() { ...

javascriptajax

Is your idTabs design in need of some sprucing up

Just stumbled upon idTabs and trying to implement a basic one on my server. I've taken the code from the 'Usual' page, included the plugin file and jQuery, but all I'm seeing is... - Tab 1 - Tab 2 - Tab 3 This is tab 1. Seems like it& ...

javascripthtmlcsstabs

After refreshing the page, the console log within the React useEffect function ceases to function

Incorporating the 'useEffect' function to fetch data and store it in the 'ratings' array has proven successful. However, there seems to be an issue when attempting to iterate through the elements of the 'ratings' array for log ...

javascriptnode.jsreactjsreact-hooks

Next.js React Server Components Problem - "ReactServerComponentsIssue"

Currently grappling with an issue while implementing React Server Components in my Next.js project. The specific error message I'm facing is as follows: Failed to compile ./src\app\components\projects\slider.js ReactServerComponent ...

javascriptreactjstypescriptnext.js

Constructing a regular expression

I've been exploring JavaScript regular expressions and encountering some challenges while trying to build a larger one. Therefore, I have decided to seek help for the entire problem rather than just individual questions. What I am looking for is a re ...

javascriptregex

Ignored CSS Style Class

Recently, I've taken on the task of developing a website that utilizes uikit features that are new to me. I'm slowly getting the hang of it. One specific part of the website is a drop-down menu containing links and headers. I have successfully s ...

htmlcssuikit

Angular BehaviorSubject is failing to emit the next value

I am facing an issue with a service that uses a Behavior subject which is not triggering the next() function. Upon checking, I can see that the method is being called as the response is logged in the console. errorSubject = new BehaviorSubject<any> ...

javascriptangulartypescriptrxjsbehaviorsubject

A complex valueOf function in Javascript

What is the purpose of using ({}).valueOf.call(myvar)? This expression converts any value to an object. If the input is already an object, it remains unchanged; however, if it is a primitive type, it gets converted to an instance of a wrapper type. I ...

javascript

Modifying the color of an empty string is not feasible in Javascript

Is it possible to change the color of FirstName only when there is text input? Currently, it turns green when there's text, but I want it to turn red when it's empty. How can this be achieved? $(document).on("click", '.btn-info.mailCo ...

javascripthtmlcssstring

Whenever I attempt to include state in a React class that is declared as a constant, I consistently encounter the error message: "TypeError:

Apologies for the redundancy, but as a newcomer to React, I previously inquired about a similar issue and have since modified my code. My current challenge involves trying to access a state value within a const React class. Below is the excerpt from my Ar ...

javascriptreactjs

What is causing the button to prevent file selection?

What's causing the button to not allow file selection when clicked on? Interestingly, placing a span or div in the label enables file selection upon clicking them, but not with the button. <html> <body> <label> <input t ...

css

"Learn the trick to replace the Ctrl + N shortcut in Firefox and initiate an AJAX request

Note: The answer provided by Juan Mendes has been selected as the best answer for my situation due to its usefulness. AxGryndr also offered valuable information, so I recommend reading both answers as they are beneficial in different scenarios. Thank you t ...

javascriptajaxfirefox

The req.isAuthenticated function in Node.js passport consistently returns false

I have encountered a problem with my authentication node.js app that I haven't been able to solve despite researching similar questions and trying various solutions. My application consists of a front end in react-native and a MongoDB database, and I ...

javascriptnode.jsexpresssessionpassport.js

Why does the value of my input get erased when I add a new child element?

I seem to be facing an issue when I try to add an element inside a div. All the values from my inputs, including selected options, get cleared. Here's a visual representation of the problem: https://i.sstatic.net/UpuPV.gif When I click the "Add Key" ...

javascripthtmldominput

The div-tag is not displaying the background image as expected

I'm completely stumped. My goal was to create my own gallery, but right from the start, I hit a roadblock: Trying to display an image as a background in a <div>. I've tried everything, searched high and low on the internet, combed through s ...

phpcsshtmlbackground-image

Sending information (prop) from _app.js to getServerSideProps in a page on the most up-to-date version of NextJS

I have a unique custom _app.js that I created: const CustomLayout = ({ children }) => (children); const myApp = ({ Component, pageProps }) => { pageProps.url = 'another url'; return ( <CustomLayout> <Co ...

javascriptnode.jsreactjsnext.js