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

Descriptions

Slantastic (http://meyerweb.com/eric/css/edge/slantastic/demo.html) supports old browsers. For CSS3-specific, try CSS polygons: http://alastairc.ac/2007/02/dissecting-css-polygons/.

Code

The HTML:

<div class="cornered"></div>
<div class="main">Hello</div>

The CSS:

.cornered {
    width: 160px;
    height: 0px;
    border-bottom: 40px solid red;
    border-right: 40px solid white;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
}

The result: http://jsfiddle.net/mdQzH/

Alternative Code

To use transparent borders and text in the border section... The HTML:

<div class="outer">
<div class="cornered">It's possible to put text up here, too
    but if you want it to follow the slant you have to stack
    several of these.</div>
<div class="main">Hello hello hello hello
hello hello hello hello hello</div>
</div>

The CSS:

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}

The result: http://jsfiddle.net/76EUw/2

Answer 2

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

jsFiddle to illustrate.

HTML
<div class="more-videos"> <a href=""><span class="text">More videos</span><span class="corner"></span></a> </div>

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.

Answer 3

In the near future you could achieve this with the CSS Shapes Module.

With the shape-inside property - we can make the text flow according to the shape.

The shape that we provide can be one of inset(), circle(), ellipse() or polygon().

This can currently be done in webkit browsers, but first you have to do the following: (instructions from Web Platform)

To enable Shapes, Regions, and Blend Modes:

1) Copy and paste opera://flags/#enable-experimental-web-platform-features into the address bar, then press enter.

2) Click the 'Enable' link within that section.

3) Click the 'Relaunch Now' button at the bottom of the browser window.

If you've done that - then check out this FIDDLE

which looks like this:

<div class="shape">
     Text here
</div>

CSS

.shape{
  -webkit-shape-inside: polygon(65px 200px,65px 800px,350px 800px,350px 80px,160px 80px);
  shape-inside: polygon(65px 200px,65px 450px,350px 450px,350px 80px,160px 80px);
  text-align: justify;
}

To contruct the polygon shape - I used this site

More info on the various properties which are supported can be found here

Answer 4

I came up with a responsive friendly solution of Ray Toal fiddle : http://jsfiddle.net/duk3/hCaXv/

The html :

<div class="outer">
<div class="cornered">It's possible to put text up here, too
    but if you want it to follow the slant you have to stack
    several of these.</div>
<div class="main">Hello llo hello llo hello hello hello llo hello hello hello hello hello hello hello hello</div>
</div>

The css :

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 100%;
    box-sizing:border-box;
    height: 0px;
    border-bottom: 2em solid red;
    border-left: 2em solid transparent;
    border-right: 2em solid transparent;
}
.main {
    background-color: red;
    padding: 0 2em;
}

Hope it helps !

Answer 5

This can be done using svg clip-path.

Advantages:

1. Work with a regular div
2. No hacky borders to create shapes
3. Do not apply any rotation so that you can easily do it on non uniform background
4. Does not add any div element through CSS so that you can still work with the regular div background (in case you have code modifying it for example!)

The following CSS will shape the div with the bottom right corner cut off so that you can put any background:

-webkit-clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0);

There are multiple SVG generators online:

• http://bennettfeely.com/clippy/
• http://cssplant.com/clip-path-generator

Support:

• Firefox: 3.5+
• Chrome: 24+
• Safari: 7+
• Opera: 15+
• Edge: 76+
• IE: None

Check https://caniuse.com/#feat=css-clip-path

Answer 6

CSS3 linear-gradient() can draw this background.

background: linear-gradient(to bottom right, transparent 50px, blue 50px);

body {
  background: linear-gradient(red, orange) no-repeat;
  min-height: 100vh;
  margin: 0;
}
div {
  background: linear-gradient(to bottom right, transparent 50px, blue 50px);
  margin: 25px auto;
  padding: 50px;
  height: 200px;
  width: 200px;
  color: white;
}

<div>
  Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
</div>