Parallelogram Navigation Background with CSS

Parallelogram navigation background with CSS

Try this Add a span inside your tags and set it's skew to the opposite direction (note the use of skewX which is considered correct according to https://developer.mozilla.org/en/CSS/-moz-transform)

<ul id="nav">
    <li><a class="current-menu-item" href="#"><span>Nav Item 1</span></a></li>
<li><a href="#"><span>Nav Item 2</span></a></li>
<li><a href="#"><span>Nav Item 3</span></a></li>
</ul>

ul#nav li a {
    display: inline-block;
    text-decoration:none;
    padding:4px 10px;
    border-radius:3px;
            transform: skewX(-10deg);
         -o-transform: skewX(-10deg);
       -moz-transform: skewX(-10deg);
    -webkit-transform: skewX(-10deg);
    color:#757575;
}

ul#nav li a span {
    display: inline-block;
            transform: skewX(10deg);
         -o-transform: skewX(10deg);
       -moz-transform: skewX(10deg);
    -webkit-transform: skewX(10deg);
}

How to style a title with a parallelogram background?

I think this is it

Adjust it to your needs

#parallelogram {
  padding: 8px;
  display: inline-block;
  background: darkred;
  transform: skewX(-30deg);
  }
#text {
  transform: initial;
  color: white;
  transform: skewX(30deg);
}

<div id="parallelogram">
  <div id="text">
    Coding practice
  </div>
</div>

CSS class to button with double parallelograms as background

If you want to create a button with the "double parallelogram" background, your on the right track using linear-gradient. You can style a <button> element using linear-gradient with color stops to create the parallelogram background you shared. I used an arbitrary width: 180px but you can adjust your color stops in the linear gradient to whichever width you end up choosing.

body {
  background-color: #252525;
}

button {
  text-align: center;
  display: block;
  width: 180px;
  height: 50px;
  border: none;
  background: linear-gradient(68deg, #000 0% 10%, #FEE195 10% 30%, #FEE195 30% 83%, #000 83% 86%, #fff 86% 90%, #000 90%);
}

<button class="custom-bg">Some Text</button>

CSS3 - making parallelogram pieces for vertical nav bar

Have you tried:

.nav {
 /*all your properties */
 transform: skew(30deg);
 -o-transform: skew(30deg); /* Opera */
 -ms-transform: skew(30deg); /* IE 9 */
 -webkit-transform: skew(30deg); /* Safari and Chrome */
}

Css: Menu hover create custom shape background image?(parallelogram shape using css)

Use pseudo elements :before and :after

FIDDLE

.testClass:hover:before {
    content: '';
    position: absolute;
    top:0;
    left:-15px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 30px 15px;
    border-color: transparent transparent beige transparent;

}
.testClass:hover:after {
    content: '';
    position: absolute;
    top:0;
    right:-15px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 30px 15px 0 0;
    border-color: beige transparent transparent transparent;

}

CSS Parallelogram on one side with image inside

Instead of skewing the logo at all, just save your image on the white background color and use an ::after (or ::before if you prefer) to draw the angle on the right side.

http://jsfiddle.net/bc2mcpst/

How to create parallelograms divs?

You can use the negative SkewX transform to get the desired effect:

div {  margin: 20px;  width: 200px;  height: 100px;  display: inline-block;  background: yellow;      border: 1px solid black;  transform: skewX(-10deg);  }

<div></div>    

How can I make a similar shape to a parallelogram in css?

You could try using a border-left with transparent as the color and abandon the *-transform's altogether. This would require a CSS change but no additional HTML markup:

Current Angle:

#parallelogram {    width: 250px;    height: 0;    border-bottom: 100px solid red;    border-left: 30px solid transparent;    margin-left: 10px;}

<div id="parallelogram"></div>

Improve Bootstrap parallelogram navbar menu by making menu items flush

In the end I decided to solve this by using a different method and then adding margin-left:-2px, which integrates much better with the Bootstrap navbar than the old solution did. The markup remains the exact same, and below is my CSS:

@media (min-width: 992px) {

  .navbar-nav .nav-item .nav-link {
    padding-right: 0.3em;
    padding-left: 0.3em;
  }

  .navbar-nav {
    display:table; 
    width:100%;
  }

  .navbar li {
    display: table-cell;
  }

  .navbar-nav .nav-item {
    float: left;
    padding-right: 1em;
    padding-left: 1em;
    position: relative;
    cursor: pointer;
    margin-left: -2px;
  }

  .navbar-nav .nav-item::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    transform: skew(-45deg);
    transition: background-color 100ms ease-in-out, border-color 100ms ease-in-out;
  }

  .navbar-nav .nav-item .active::after {
    background-color: var(--bs-body-color);
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    transform: skew(-45deg);
    transition: background-color 100ms ease-in-out, border-color 100ms ease-in-out;
  }

  .navbar-nav .nav-item .nav-link {
    color: var(--bs-body-colour);
    transition: none;
  }

  .navbar-nav .nav-item .active,
  .navbar-nav .nav-item .nav-link:hover {
    color: var(--bs-body-bg);
  }

  .navbar-nav .nav-item:hover::after {
    background-color: var(--bs-body-color);
    color: var(--bs-body-bg);
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    transform: skew(-45deg);
    transition: background-color 100ms ease-in-out, border-color 100ms ease-in-out;
  }
}

Notice that I placed it all inside of the md media-query to ensure it applies only to all devices that are larger, preventing it from interfering with the navbar on non-mobile devices.

---

Related Topics