The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Making 3D Ribbon Effects with CSS – PROBLEM

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #32986

    Hey guys, I added this “ribbon” effect to the nav of a page, and I can’t get it to stay still. Whenever I scroll, zoom, or resize the triangle ends up moving. How do I keep this thing fixed to the nav bar so it never moves? Here’s the code:

    Blog Title

    #left_column {
    position: fixed;
    height: 100%;
    width: 30%;
    background-color: #F0F2F0;

    .main_title {
    margin: 5px 5px 20px 5px;
    font-size: 35px;
    text-align: center;
    text-shadow: 1px 1px 1px black, 2px 2px 1px black, 3px 3px 1px black, 4px 4px 1px black;

    #left_column h2 {
    font-size: 25px;
    margin-bottom: 5px;
    color: #4A738C;

    nav {
    position: relative;
    margin: 0 -10px 50px 10%;
    padding: 2px;
    width: 93%;

    background-color: #4A738C;

    -webkit-box-shadow: 1px 1px 5px black;
    -moz-box-shadow: 1px 1px 5px black;
    box-shadow: 1px 1px 5px black;

    nav ul { text-align: center; }

    .triangle {
    border-color: transparent transparent transparent #41657A;
    border-style: solid;
    border-width: 15px;
    height: 0px;
    width: 0px;
    position: relative;
    left: 384px;
    bottom: 65px;
    z-index: -1;

    Found it! The problem was that the width of the left column was set in a percentage.. So when I resized, it would adjust that percent to the current size of the browser, thus messing up the ribbon.. Just in case anyone was wondering.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.