Slanted Corner on CSS box

Question

I have been playing with CSS for only a short time and am trying to have a normal box but with the top left hand corner cut off at a 45 degree angle. Not a small amount eith

Answer 1

I've managed to do something very similar using only an additional spans and the effect is done via CSS.

jsFiddle to illustrate.

HTML

More videos

CSS

`.more-videos {
     padding: 20px;
 }

    .more-videos a {
        text-decoration: none;
        background-color: #7f7f7f;
        position: relative;
        padding: 10px 10px 5px 15px;
    }

        .more-videos a span {
            font-size: 20px;
            color: #ffffff;
        }

            .more-videos a span.text {
                padding-right: 10px;
            }

            .more-videos a span.corner {
                border-top: 15px solid #7f7f7f;
                border-right: 15px solid #4d4c51;
                border-bottom: none;
                border-left: none;
                bottom: 0px;
                right: 0px;
                position: absolute;
            }

        .more-videos a:hover span.corner {
            border-right: 15px solid #999999;
        }

I have included a hover style triggered from the parent. The 'border-right: 15px solid #4d4c51;' color is the one that needs to be different from the parent anchor background color in order to create the diagonal/angular contrast.